.lightbox-gallery {
  @apply grid sm:grid-cols-2 lg:grid-cols-3 gap-6;
  img {
    @apply h-full w-full object-cover max-h-80;
  }
  &__picture {
    @apply pointer-events-none;
  }
}

.lightbox {
  @apply fixed inset-0 w-full h-full z-40 bg-opacity-75 flex items-start justify-center;
  /* backdrop-filter: blur(10px) lightness(20%); */
  backdrop-filter: brightness(50%) blur(1px);
  overflow-y: auto;
  animation: lightboxIn 0.5s;

  &--inactive {
    @apply hidden;
  }

  &__prev,
  &__next {
    @apply absolute top-1/2 transform -translate-y-1/2 z-50;
    transition: all 0.3s;
    &:hover {
      @apply scale-110;
    }
  }

  &__prev {
    @apply left-8;
    img {
      @apply rotate-180;
    }
  }

  &__next {
    @apply right-8;
  }

  &__close {
    @apply absolute flex items-center top-0 right-0 m-4 text-neutral-900 text-base font-bold;
    &:after {
      @apply w-4 h-4 ml-4;
      content: '';
      display: inline-block;
      background-image: url('../resources/img/graphic-assets/cross-close.svg');
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  &__container {
    @apply relative flex justify-center items-center bg-white;
    width: 90%;
    height: fit-content;
    min-height: 90vh;
    @apply my-4 mx-auto;
  }

  &__current-picture {
    img {
      @apply h-full w-full  max-w-xl;

      max-height: 60vh;
    }
  }
}

@keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}