update highlight card for responsiveness

Author: hmillersarah

web-components/hero-section/hero-section.css

@@ -42,14 +42,17 @@ section {
 
 .hero {
     display: grid;
-    grid-template-columns: 4em 1fr 1fr;
-    /* grid-template-rows: 4em 4em 6em 1fr; */
+    grid-template-columns: 4em 1fr;
     grid-template-rows: 4em repeat(3, 1fr);
     padding: 3em;
     padding-top: 2em;
     align-items: center;
 }
 
+.hero-highlight {
+    grid-template-columns: 4em 1fr 1fr;
+}
+
 .hero-no-buttons {
     grid-template-rows: 4em repeat(2, 1fr);
 }
@@ -146,7 +149,7 @@ h6, p {
     background-color: white;
     padding: 2em 3em 2em 3em;
     margin: 1em;
-    opacity: 0.9;
+    opacity: 0.75;
     display: flex;
     flex-flow: column wrap;
     gap: 1em;
@@ -174,6 +177,10 @@ h6, p {
 
 @media screen and (min-width: 90em) {
     .hero {
+        grid-template-columns: 4em 4fr 1fr;
+    }
+
+    .hero-highlight {
         grid-template-columns: 4em 1fr 1fr;
     }
 }
@@ -186,4 +193,9 @@ h6, p {
         gap: 1em;
         padding: 3em 2em;
     }
+
+    .highlight-card {
+        padding: 2em;
+        margin: 0;
+    }
 }

web-components/hero-section/hero-section.js

@@ -61,6 +61,9 @@ function createComponent(html) {
             const shadow = this.attachShadow({mode: 'open'});
             shadow.innerHTML = html;
 
+            const heroSection = shadow.querySelector('.hero-section');
+            const hero = shadow.querySelector('.hero');
+
             // Set content
             setImage('.image', this.image, shadow);
             setContent('.section', this.section, shadow);
@@ -73,17 +76,16 @@ function createComponent(html) {
                 img.classList.add('large-icon');
             }
 
+            // Display highlight card if content is provided
             if (this.highlight != undefined) {
                 setContent('.highlight', this.highlight, shadow);
                 setLink('.highlight-link', this.highlightlink, shadow);
+                hero.classList.add('hero-highlight');
             } else {
                 const highlightCard = shadow.querySelector('.highlight-card');
                 highlightCard.style.display = 'none';
             }
 
-            const heroSection = shadow.querySelector('.hero-section');
-            const hero = shadow.querySelector('.hero');
-
             // Check if primary button is used
             if (this.link != undefined) {
                 setLink('.button-primary', this.link, shadow);