.entry-content .wp-block-gallery {
    @if ( true == $is_rtl ) {
        padding-right: 0
    } @else {
        padding-left: 0
    }
    & > li {
        padding: 0;
    }
}
// Related to https://github.com/presscustomizr/customizr/issues/1789
.wp-block-gallery {
    .blocks-gallery-grid, .blocks-gallery-item {
      padding: 0;
    }
    .blocks-gallery-image figcaption, .blocks-gallery-item figcaption {
        left: 0;
        right: 0;
        text-align: center;
        width: auto;
    }

}

.gallery-item {
  // do not style standard gallery
  dt {
    text-align: inherit;
    &::before { content: none }
    padding: 0.8rem;
  }
  dd.wp-caption-text {
    padding: 0 0.8rem;
    margin: 0;
    &::before { content: none }
  }
  // do not style standard gallery
}

section[class^="post-"] .gallery.row {
  margin-top: $base-line-height-fixed;
  margin-bottom: $base-line-height-fixed;
}


//let's style only our gallery
.czr-gallery {

  .czr-gallery-icon {
    overflow: hidden;
    position: relative;

    img {
      display: block;


      max-width: 100%;
      width: 100%;

      @at-root .czr-gallery-style .gallery-item {
        img  {
          @include transition-transform(0.3s ease-in-out);
        }
        &.hover img {
          @include transform( scale(1.1) );
        }
      }

    }

  }

  //
  // gallery columns management inspired by twentyseventeen
  //
  // (1) In extra small devices (max-width 575px) the gallery items take 50% of the container width
  // (2) except the 1 column case, which is displayed at 100%
  //
  // (3) From small devices to desktop (min-width 576px) the 3 columns gallery items take 1/3 of the container width
  // (4) In small devices (min-width 576px) the 4-9 columns gallery items will take 25% of the container width
  //     while starting from a ww of 768px they'll take the 100/$i ( $i in [4,9] ) of the container width (see 4.a for exceptions)
  //
  // (4.a) when displaying two sidebars, to avoid very very small gallery items, in the min-width 768px and max-width 991px viewport,
  // we limit the width of the 4-9 columns gallery items to 25% of the container width
  //
  // N.B. this map is used also in the CZR_gallery ( core/front/utils/class-content-gallery.php ) to define the reponsive image sizes

  //(1)
  .gallery-item {
      width: 50%;
      margin: 0 0 1rem;
  }

  //(2)
  &.gallery-columns-1 .gallery-item {
      width: 100%;
  }

  //(3)
  @include media-breakpoint-up(sm) {
    &.gallery-columns-3 .gallery-item {
      width: percentage( 1 / 3 );
    }
  }

  //(4)
  @for $i from 4 through 9 {
    &.gallery-columns-#{$i} {
      @include media-breakpoint-up(sm) {
        .gallery-item {
          width: 25%;
        }
      }//min-width 576px

      @include media-breakpoint-up(md) {
        .gallery-item {
          width: percentage( 1 / $i );
        }
      }//min-width 768px
    }
  }//for


  //(4.a)
  //case 2 sidebars
  @for $i from 4 through 9 {
    .czr-b-sidebar #content &.gallery-columns-#{$i} {
      @include media-breakpoint-between(md, md) {
        .gallery-item {
          width: 25%;
        }
      }//min-width 768px and max-width 991px
    }
  }//for


  //post-action button sizing
  @for $i from 3 through 9 {
    &.gallery-columns-#{$i} {
      .gallery-item {
        .post-action {
          width:  $base-line-height * 9/$i;
          height: $base-line-height * 9/$i;
          top: $base-line-height - $i/10 ;
          right: $base-line-height - $i/10 ;
          a {
            line-height: $base-line-height*9/$i;
          }//a
        }//.post-action
      }//.gallery-item
    }//.gallery-columns-#
  }//for

}