15632 CLP Aspect Ratio update

department-of-veterans-affairs · Nov 13, 2023 · 95fc0fa · 95fc0fa
1 parent 4c4c807
commit 95fc0fa
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/site/layouts/campaign_landing_page.drupal.liquid b/src/site/layouts/campaign_landing_page.drupal.liquid
@@ -6,12 +6,11 @@
 <div id="content" class="interior" data-template="node-campaign_landing_page">
   <main>
     <!-- Hero-->
-    <div class="va-u-background--image" style="background-image: url('{{ fieldHeroImage.entity.image.derivative.url }}">
-      <!-- Hero Content -->
-      <div class="vads-l-grid-container vads-u-padding-x--0">
-        <div class="vads-l-row">
-          <div class="vads-l-col--12 medium-screen:vads-l-col--6">
-            <div class="va-u-background--gradiant-blue vads-u-padding-x--4 vads-u-padding-bottom--6 vads-u-padding-top--4 medium-screen:vads-u-margin-right--4">
+    <div class="va-u-background--gradiant-blue">
+      <div class="vads-l-grid-container vads-u-padding-x--4 large-screen:vads-u-padding-x--0">
+        <div class="vads-l-col--12 small-screen:vads-l-col--10 medium-screen:vads-l-col--8 small-desktop-screen:vads-l-col--12">
+          <div class="vads-u-display--flex small-desktop-screen:vads-l-row">
+            <div class="vads-l-col--12 small-desktop-screen:vads-l-col--6 vads-u-padding-top--4 vads-u-padding-bottom--6 small-desktop-screen:vads-u-padding-right--4">
               <h1 class="vads-u-color--white">{{ title }}</h1>
               <hr class="va-c-blue-line--large vads-u-border-color--primary-alt vads-u-border--2px vads-u-margin-y--2" />
               <p class="va-introtext vads-u-color--white">{{ fieldHeroBlurb }}</p>
@@ -26,6 +25,9 @@
                 </a>
               {% endif %}
             </div>
+            <div class="vads-u-display--none vads-l-col--6 small-desktop-screen:vads-u-display--block">
+              <img class="vads-u-height--full" style="object-fit:cover" alt="" src="{{ fieldHeroImage.entity.image.derivative.url }}">
+            </div>
           </div>
         </div>
       </div>