handling lightbox-gallery-styles

resources/css/blocks/lightbox-gallery.css

@@ -0,0 +1,74 @@
+.lightbox-gallery {
+  @apply grid grid-cols-3 gap-6;
+  img {
+    @apply h-full w-full object-cover max-h-80;
+  }
+}
+
+.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;
+  }
+}