Hero Banner small center variant (#452)

* hero small center * center text on 100% width on mobile * padding gutter * undo --------- Co-authored-by: Joe-Savella <[email protected]>
Esri · Dec 23, 2024 · 83f3ed4 · 83f3ed4
1 parent d702499
commit 83f3ed4
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/eds/blocks/hero/hero.css b/eds/blocks/hero/hero.css
@@ -34,8 +34,12 @@
   font-size: var(--font-6);
 }
 
+.hero.small.center .content {
+  text-align: center;
+}
+
 .hero :where(h1, p) {
-  inline-size: 90%;
+  inline-size: 100%;
 }
 
 .hero p:has(+ p) {
@@ -95,6 +99,10 @@
   aspect-ratio: 3 / 2;
 }
 
+.hero.small picture img {
+  aspect-ratio: 16 / 9;
+}
+
 @media (width >= 1024px) {
   .hero {
     align-items: center;
@@ -110,4 +118,12 @@
     inline-size: 50%;
     max-inline-size: 700px;
   }
+
+  .hero :where(h1, p) {
+    inline-size: 90%;
+  }
+
+  .hero.small.center :is(.image, .content) {
+    inline-size: auto;
+  }
 }