feat: initial commit

src/assets/styles/components/media-grid.css

@@ -0,0 +1,69 @@
+.media-grid {
+  display: grid;
+  gap: var(--spacing-sm);
+  grid-template-columns: var(--grid-shape);
+
+  a {
+    aspect-ratio: var(--aspect-ratio);
+  }
+
+  & + .media-grid {
+    margin-top: var(--spacing-sm);
+  }
+
+  &.vertical {
+    --grid-shape: var(--grid-vertical);
+
+    a {
+      --aspect-ratio: var(--aspect-ratio-vertical);
+    }
+  }
+
+  img {
+    width: var(--sizing-full);
+    height: auto;
+  }
+
+  .media-grid-item {
+    position: relative;
+    border-radius: var(--border-radius-slight);
+  }
+
+  .meta-text {
+    position: absolute;
+    z-index: 2;
+    left: var(--spacing-sm);
+    bottom: var(--spacing-sm);
+    max-width: calc(var(--sizing-full) - calc(var(--spacing-sm) * 2));
+    color: var(--text-color-inverted);
+    background-color: var(--section-color, var(--accent-color));
+    padding: var(--spacing-xs);
+    border-radius: var(--border-radius-slight);
+
+    & > * {
+      color: var(--text-color-inverted);
+    }
+
+    .header,
+    .subheader {
+      line-height: var(--line-height-md);
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .header {
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-bold);
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 6;
+      line-clamp: 6;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .subheader {
+      font-size: var(--font-size-xs);
+    }
+  }
+}