init

assets/css/components.css

@@ -0,0 +1,47 @@
+.gallery {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.375rem;
+  filter: blur(3rem);
+  width: calc(100% - 3rem);
+  height: calc(100% - 3rem);
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transition: 0.625s filter linear, 0.625s -webkit-filter linear;
+  -o-transition: 0.625s -o-filter linear;
+  -ms-transition: 0.625s -ms-filter linear;  
+  -moz-transition: 0.625s -moz-filter linear;
+  -moz-transition: 0.625s filter linear;
+  -webkit-transition: 0.625s -webkit-filter linear;
+}
+
+.gallery__item img {
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 16/9;
+  cursor: pointer;
+}
+
+.preview {
+  position: absolute;
+  top: calc(50% - 2rem);
+  background: var(--color-white);
+  box-shadow: var(--shadow-outset);
+  cursor: pointer;
+}
+
+.preview:hover {
+  background: var(--color-white-100);
+}
+
+.preview--prev {
+  left: 0;
+  padding: 1.25rem 1rem 1.25rem 1.5rem;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.preview--next {
+  right: 0;
+  padding: 1.25rem 1.5rem 1.25rem 1rem;
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}