.image-gallery-container {
  width: 100%;

  .image-gallery-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    figure {
      margin-bottom: $spacing--m; // margin bottom used because of IE11 (instead of grid-gap)
      width: grid-columns(4, 12);
    }

    // if supported use grid
    @supports (display: grid) {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      figure {
        margin-bottom: 0;
        width: 100%;
      }
    }
  }

  .bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: $border-radius--l;
    min-height: 200px;
    transition-duration: $transition-duration;
    width: 100%;

    &:hover {
      box-shadow: inset 0 0 0 2000px $color-alpha--two-30;
      transition-duration: $transition-duration;
    }
  }

  figure[data-rs-image-gallery-totals-overlay='true'] {
    position: relative;

    .bg-image {
      box-shadow: inset 0 0 0 2000px $color-alpha--two-30;
      transition-duration: $transition-duration;
    }

    &:hover {
      .bg-image {
        box-shadow: inset 0 0 0 2000px $color-alpha--two-70;
        transition-duration: $transition-duration;
      }
    }

    .photo-totals-overlay {
      @include font-style('title--xs');
      color: $color--white;
      cursor: pointer;
      position: absolute;
      text-align: center;
      top: 45%;
      width: 100%;
    }

    // needed to align overlay text to the middle in this specific viewport
    @media (min-width: 501px) and (max-width: 622px) {
      .photo-totals-overlay {
        top: 35%;
      }
    }
  }
}

// viewport m
@include viewport--range($breakpoint-viewport--m, $breakpoint-viewport--l) {
  .image-gallery-container .image-gallery-selector {
    // if supported use grid
    @supports (display: grid) {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
  }
}

// viewport l
@include viewport--l {
  .image-gallery-container {
    .bg-image {
      min-height: 250px;
    }
  }
}