next: ai part 2

website_next/ask/hero/style.css

@@ -0,0 +1,88 @@
+main[data-page="ask"] [data-ask-hero] {
+  display: grid;
+  place-content: center;
+  width: min(100%, 44rem);
+  min-height: 100%;
+  margin-inline: auto;
+  padding: 6rem 1.5rem 10rem;
+  text-align: center;
+
+  > p,
+  > h1 {
+    margin: 0;
+  }
+
+  > p:first-child {
+    color: var(--orange);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-strong);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+  }
+
+  > h1 {
+    margin-top: 0.75rem;
+    font-family: var(--font-serif);
+    font-size: clamp(2.75rem, 5vw, 3.75rem);
+    font-weight: var(--font-weight-regular);
+    line-height: 0.95;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  > p:nth-child(3) {
+    max-width: 28rem;
+    margin: 0.75rem auto 0;
+    color: var(--gray);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    text-wrap: balance;
+  }
+
+  > nav {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5rem;
+    width: min(100%, 38rem);
+    margin-top: 1.5rem;
+    margin-inline: auto;
+
+    > button {
+      justify-content: space-between;
+      gap: 0.625rem;
+      width: 100%;
+      min-height: var(--ask-control-size);
+      border-radius: var(--control-radius);
+      padding: 0.5rem 0.75rem;
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+      text-align: left;
+      text-transform: none;
+
+      > span {
+        color: inherit;
+        opacity: 0.55;
+      }
+    }
+  }
+}
+
+@media (max-width: 48rem) {
+  main[data-page="ask"] [data-ask-hero] {
+    padding: 6rem 1rem 8rem;
+  }
+}
+
+@media (max-width: 32rem) {
+  main[data-page="ask"] [data-ask-hero] {
+    > h1 {
+      font-size: 3.25rem;
+    }
+
+    > nav {
+      grid-template-columns: 1fr;
+      width: min(100%, 20rem);
+    }
+  }
+}