merge

src/scss/components/banner/_default-banner.scss

@@ -0,0 +1,56 @@
+@charset "UTF-8";
+
+.thub-wrapper--banner-default {
+
+    // Border top.
+    &::before {
+        background: $thub-gradient-lagunita-to-ochre-to-red;
+        height: 3px;
+        border-radius: 1.5px;
+        display: block;
+        content: ' ';
+    }
+
+    .su-hero__card {
+        background: $su-color-black url("../assets/png/banner-bg.jpg") no-repeat 100% / cover;
+        border: none;
+        box-shadow: none;
+
+        @include grid-media-min('md') {
+            min-width: 622px;
+        }
+
+        section.su-card__contents {
+            color: $su-color-white;
+            padding: 11.0rem 5.0rem 5.5rem 3.8rem;
+
+            div.su-card__superhead {
+                @include slab;
+
+                font-weight: $su-font-regular;
+                font-size: 1.7rem;
+            }
+
+            h2,
+            h3 {
+                @include thub-type-b;
+            }
+
+            p {
+                font-size: 2.1rem;
+                line-height: 1.5;
+
+                a {
+                    @include thub-type-link;
+                }
+            }
+
+            a.su-link--action {
+                @include thub-type-link;
+            }
+        }
+    }
+}
+
+
+

src/scss/components/banner/_overlay-banner.scss

@@ -20,6 +20,10 @@
         @include grid-media-min('lg') {
             flex-direction: row;
         }
+
+        @include grid-media-min('2xl') {
+            min-height: 620px;
+        }
     }
 
     .su-hero__card {
@@ -61,17 +65,14 @@
     .su-hero__media {
         right: 0;
         width: fit-content;
-        min-height: 370px;
+        min-height: unset;
         position: relative;
         background: transparent;
+        aspect-ratio: 3/2;
 
-        @include grid-media-max('md') {
-            aspect-ratio: 11/11;
-        }
-
-        @include grid-media-min('lg') {
+        @include grid-media-min('2xl') {
+            min-height: 620px;
             position: absolute;
-            width: 50%;
         }
     }
 

src/scss/components/banner/index.scss

@@ -2,4 +2,5 @@
 
 // Banner rollup file.
 
+@import 'default-banner';
 @import 'overlay-banner';