Image Gallery

.image-gallery {
  // -1 gridblock in all directions to make up for gutter
  // around each of the image grid items
  margin: #{$grid-gap / -2};
}

.modal {
  .modal__wrapper {
    max-width: 80vw;
    max-height: 80vh;

    img {
      max-width: 80vw;
      max-height: 80vw;
    }
  }
}

.image-gallery__block {
  a {
    display: block;
    overflow: hidden;

    &:hover,
    &:focus {
      figure {
        img {
          transform: scale(1.1);
        }

        &::before,
        &::after {
          opacity: 1;
        }
      }
    }
  }

  figure {
    position: relative;
    overflow: hidden;

    img {
      transition: transform .6s ease-in-out;
    }

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: opacity .3s ease-in-out;
      color: color(davidson-white);
      font-family: 'iconfont';
      font-size: 2.2em;
      line-height: 1.2;
      content: $icon-popup;
      opacity: 0;
      z-index: 10;
    }

    &::before {
      $overlay-color: rgba(color(davidson-red), .7);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: opacity .3s ease-in-out;
      background-color: $overlay-color;
      box-shadow: inset 0 0 0 .5rem color(davidson-red);
      content: '';
      opacity: 0;
      z-index: 10;
    }
  }

  figcaption {
    display: none;
  }
}

.image-gallery__slide__title {
  @include rr-font-compute(l, tight);
  font-weight: 500;
}

.image-gallery__block-sizer,
.image-gallery__block {
  width: calc(33.3% - #{$grid-gap});
  padding: #{$grid-gap / 2};
  box-sizing: content-box;

  figure {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.image-gallery__block--width2 {
  width: calc(66.6% - #{$grid-gap});
}

// magnific popup 
.mfp-bg {
  background-color: color(medium-teal);
}

button.mfp-close {
  right: 0;
  width: 1.4em !important; // sass-lint:disable-line no-important
  padding: 0;
  line-height: 1;
  text-align: center;
  &:before {
    display: none;
  }
}

button.mfp-arrow {
  &:before,
  &:after {
    transform: none;
    background: transparent;
  }
  &:hover,
  &:active {
    &:before,
    &:after {
      left: 0;
    }
  }
}

.mfp-image-holder {
  .mfp-bottom-bar {
    position: relative;
    top: auto;
    margin-top: 0;
  }

  .mfp-figure {
    padding: 3rem;
    background-color: color(davidson-white);
  }

  .mfp-figure::after {
    display: none;
  }

  .mfp-title {
    padding-right: 0;
  }

  .mfp-counter {
    top: auto;
    bottom: 100%;
  }

  .mfp-img {
    padding: 0 0 1rem;
  }

  figure img {
    max-width: 70vw;
    height: auto;
  }

  @include rr-break-directive(l) {
    .mfp-landscape figure {
      figcaption {
        margin: 2rem;
      }
    }

    .mfp-portrait figure {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      max-width: 70vw;

      img {
        flex: 1 1 50%;
        max-width: 30vw;
        margin-right: 2rem;
      }

      figcaption {
        flex: 1 1 50%;
        margin-right: 2rem;
      }

      .mfp-bottom-bar {
        margin-top: 56px;
      }
    }
  }
}