redesign the homepage

homepage/src/components/layout/LayoutPrimitives.module.css

@@ -0,0 +1,81 @@
+.container {
+  inline-size: min(100%, var(--container-wide));
+  margin-inline: auto;
+  padding-inline: var(--layout-gutter);
+}
+
+.content {
+  max-inline-size: var(--container-content);
+}
+
+.reading {
+  max-inline-size: var(--container-reading);
+}
+
+.full {
+  max-inline-size: none;
+}
+
+.section {
+  padding-block: var(--section-space);
+}
+
+.sectionMuted {
+  background: var(--surface-muted);
+}
+
+.sectionStrong {
+  background: var(--surface-strong);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.stackSmall {
+  gap: var(--space-3);
+}
+
+.stackMedium {
+  gap: var(--space-6);
+}
+
+.stackLarge {
+  gap: var(--space-12);
+}
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.clusterSmall {
+  gap: var(--space-2);
+}
+
+.clusterMedium {
+  gap: var(--space-4);
+}
+
+.clusterLarge {
+  gap: var(--space-8);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  gap: var(--space-6);
+}
+
+.bleed {
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+}
+
+.sticky {
+  position: sticky;
+  z-index: var(--layer-sticky);
+  inset-block-start: 0;
+}