Stack control | variation section in vertical order

Saabbir · May 1, 2024 · cb4ed4e · cb4ed4e
1 parent 0da318a
commit cb4ed4e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/assets/scss/04-utilities/utilities.scss b/assets/scss/04-utilities/utilities.scss
@@ -93,10 +93,20 @@ grid helpers
   grid-template-columns: 1fr 1fr;
 }
 
+.u-grid-2-columns-from-500 {
+  @media (min-width: 500px) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .u-gap-16 {
   gap: rem(16px);
 }
 
+.u-gap-48-16 {
+  gap: rem(48px) rem(16px);
+}
+
 .u-gap-32 {
   gap: rem(32px);
 }

diff --git a/content/work/bat-uk-homepage-product-carousel.md b/content/work/bat-uk-homepage-product-carousel.md
@@ -49,16 +49,16 @@ The final winning design resulted in:
 
 <!-- Start Control | Variation Section -->
 <div class="l-wrap l-wrap--fluid">
-  <div class="u-d-grid u-grid-2-columns u-gap-16">
+  <div class="u-d-grid u-grid-2-columns-from-500 u-gap-48-16">
   <div class="c-control">
-    <h2>Control<h2>
+    <h2>Control</h2>
 
 <MarkdownImg src="work/bat-uk-homepage-product-carousel/Control.png" alt="BAT UK Homepage Product Carousel Control"></MarkdownImg>
 
   </div>
 
   <div class="c-variation">
-    <h2>Variation<h2>
+    <h2>Variation</h2>
 
 <MarkdownImg src="work/bat-uk-homepage-product-carousel/Variation.png" alt="BAT UK Homepage Product Carousel Variation"></MarkdownImg>