ok

css/album.css

@@ -0,0 +1,139 @@
+#album-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: dense;
+    gap: 1.5rem;
+
+    @media (max-width: 1024px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 480px) {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    & > * {
+        aspect-ratio: 1/1;
+        overflow: hidden;
+        border-radius: var(--border-radius);
+        background: var(--surface-container-highest);
+        transition:
+            transform 0.3s,
+            box-shadow 0.3s;
+        position: relative;
+        cursor: pointer;
+    }
+
+    & > *:hover {
+        transform: translateY(-8px);
+        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
+    }
+
+    & img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.5s;
+    }
+
+    & > *:hover img {
+        transform: scale(1.08);
+    }
+}
+
+#lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    &.open {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    & > img {
+        max-width: min(90vw, 1200px);
+        max-height: 85vh;
+        border-radius: var(--small-radius);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        object-fit: contain;
+        min-width: 200px;
+        min-height: 200px;
+        background: var(--surface-container-highest);
+    }
+
+    & > button {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.5);
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+        transition: background 0.2s;
+
+        @media (hover: hover) {
+            &:hover {
+                background: rgba(0, 0, 0, 0.8);
+            }
+        }
+
+        & svg {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+
+    & #lb-close {
+        top: 1.5rem;
+        right: 1.5rem;
+    }
+
+    & #lb-prev {
+        left: 1.5rem;
+    }
+
+    & #lb-next {
+        right: 1.5rem;
+    }
+
+    @media (max-width: 480px) {
+        & > button {
+            width: 2.5rem;
+            height: 2.5rem;
+
+            & svg {
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+
+        & #lb-close {
+            top: 0.75rem;
+            right: 0.75rem;
+        }
+
+        & #lb-prev {
+            left: 0.75rem;
+        }
+
+        & #lb-next {
+            right: 0.75rem;
+        }
+    }
+}