1 files changed, 49 insertions, 0 deletions
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 164d05c..fcf5218 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -244,3 +244,52 @@ table {
     @extend .ph3, .pv2;
   }
 }
+// gallery
+// https://lubna.dev/articles/create-css-only-image-gallery/
+* {
+  box-sizing: border-box;
+}
+
+$max-img-width: 72rem;
+$max-img-height: 48rem;
+
+.gallery {
+  display: flex;
+  margin: 10px auto;
+  max-width: $max-img-width;
+  position: relative;
+  padding-top: $max-img-height/$max-img-width * 100%;
+
+  @media screen and (min-width: $max-img-width) {
+    padding-top: $max-img-height;
+  }
+
+  &__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &__thumb {
+    padding-top: 6px;
+    margin: 6px;
+    display: block;
+  }
+
+  &__selector {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+
+    &:checked {
+      + .gallery__img {
+        opacity: 1;
+      }
+      ~ .gallery__thumb > img {
+        box-shadow: 0 0 0 3px #0be2f6;
+      }
+    }
+  }
+}