assignment 1

assignments/a1/css/gallery.css

@@ -0,0 +1,36 @@
+@import 'shared.css';
+
+#gallery {
+  max-width: var(--w-5xl);
+  margin: 0 auto;
+  padding: var(--space-16) 1rem;
+
+  display: grid;
+
+  gap: 1rem;
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  & > img {
+    border-radius: var(--rounded-md);
+    box-shadow:
+      0 4px 6px -1px #ffffff9a,
+      0 2px 4px -2px #ffffff9a;
+
+    &:hover {
+      transform: scale(1.01);
+      transition: transform 300ms;
+
+      box-shadow:
+        0 8px 10px -1px #ffffff9a,
+        0 4px 6px -2px #ffffff9a;
+    }
+  }
+}