add simple lightbox

resources/css/components/_BadEggLightbox.scss

@@ -0,0 +1,92 @@
+#badegg-lightbox {
+  &-overlay,
+  &-image,
+  &-close {
+    transition: all 300ms ease;
+    opacity: 0;
+  }
+
+  &-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    padding: 3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(white, 0.5);
+
+    .open & {
+      opacity: 1;
+      backdrop-filter: blur(1em);
+    }
+  }
+
+  &-image {
+    position: relative;
+    z-index: 2;
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    transform: scale(0.8);
+
+    .open & {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  &-close {
+    position: absolute;
+    z-index: 3;
+    top: 1em;
+    right: 1em;
+    display: block;
+    appearance: none;
+    border: none;
+    background: transparent;
+    border: 2px solid black;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    transform: scale(0.01) rotate(-360deg);
+
+    .open & {
+      opacity: 1;
+      transform: none;
+    }
+
+    &:hover,
+    &:focus {
+      transform: scale(1.2) rotate(90deg);
+    }
+
+    .admin-bar & {
+      top: calc(1em + 32px);
+
+      @media (max-width: 782px) {
+        top: calc(1em + 46px);
+      }
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      stroke: black;
+      stroke-width: 5;
+    }
+
+    &:focus {
+      outline: 2px dashed red;
+    }
+  }
+}