/* -------------------------------------------------- */
/*    Image Gallery
/* -------------------------------------------------- */
@import '../../../../node_modules/photoswipe/src/css/main';
@import '../../../../node_modules/photoswipe/src/css/default-skin/default-skin';

.m-imageGalleryWrapper {
  /* empty */
}

.m-imageGallery {
  @include make-row(1/8, 1/4);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;

  &__item {
    @include make-col();
    padding-left: s(1/2) !important;
    padding-right: s(1/2) !important;
    display: flex;
    align-items: stretch;
    width: calc(100% / 2);

    @include media('>=s') {
      width: calc(100% / 4);
    }
  }

  &__link {
    width: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      background-color: c('white');
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease('out-cubic');
    }

    &:hover {
      &::after {
        opacity: 0.25;
        transition: opacity 0.25s ease('out-cubic');
      }
    }
  }

  @include media('>=s') {
    &--6columns {
      .m-imageGallery__item {
        @include make-col(3);
      }
    }

    &--5columns {
      .m-imageGallery__item {
        @include make-col(3);
      }
    }

    &--4columns {
      .m-imageGallery__item {
        @include make-col(3);
      }
    }

    &--3columns {
      .m-imageGallery__item {
        @include make-col(4);
      }
    }

    &--2columns {
      .m-imageGallery__item {
        @include make-col(6);
      }
    }
  }

  @include media('>=m') {
    &--6columns {
      .m-imageGallery__item {
        @include make-col(2);
      }
    }

    &--5columns {
      .m-imageGallery__item {
        @include make-col(12/5);
      }
    }
  }
}

// Photoswipe Overwrites
.pswp__bg {
  background: rgba(c('black'), 0.95);
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
  background-image: url('/assets/images/svg/single/default-skin.svg');
}
