Add jumbo hero 50/50 variation

cfpb · Sep 30, 2021 · 1a4f2a3 · 1a4f2a3
1 parent b946c29
commit 1a4f2a3
Showing 1 changed file with 23 additions and 7 deletions.
diff --git a/packages/cfpb-layout/src/molecules/heroes.less b/packages/cfpb-layout/src/molecules/heroes.less
@@ -186,13 +186,9 @@
 
         .respond-to-min( @bp-sm-min, {
             .m-hero_wrapper {
-                // Position the hero image all the way to the right plus a little
-                // extra so that it flows into the gutter
-                background-position: calc( 100% + @grid_gutter-width ) center;
+                background-position: 50%;
                 background-repeat: no-repeat;
-                background-size: 50%;
-                border: 1px solid @gray-40;
-                border-top: none;
+                background-size: cover;
             }
 
             .m-hero_text {
@@ -214,7 +210,7 @@
 
         .respond-to-min( @bp-lg-min, {
             .m-hero_wrapper {
-                min-height: unit( 350px / @base-font-size-px, em );
+                min-height: unit( 290px / @base-font-size-px, em );
             }
             .m-hero_heading {
                 .superheading();
@@ -224,4 +220,24 @@
             }
         } );
     }
+
+    &__50-50 {
+        .respond-to-min( @bp-sm-min, {
+            .m-hero_wrapper {
+                // Position the hero image all the way to the right plus a little
+                // extra so that it flows into the gutter
+                background-position: calc( 100% + @grid_gutter-width ) center;
+                background-size: 50%;
+                border: 1px solid @gray-40;
+                border-top: none;
+            }
+        } );
+
+        .respond-to-min( @bp-lg-min, {
+            .m-hero_wrapper {
+                min-height: unit( 350px / @base-font-size-px, em );
+            }
+        } );
+    }
+
 }