From 24c7e7e66b1361df288b04097464d788b944c361 Mon Sep 17 00:00:00 2001
From: wbraden <133058316+wbraden@users.noreply.github.com>
Date: Fri, 9 Aug 2024 18:20:56 -0600
Subject: [PATCH] tweaked section padding if there is not a background

---
 css/main.css  | 10 +++++++---
 index.html    |  4 ++--
 retailer.html | 38 +++++++++++++++++++-------------------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/css/main.css b/css/main.css
index bdee247..4ea1e48 100644
--- a/css/main.css
+++ b/css/main.css
@@ -470,10 +470,14 @@ img.avatar {
 
 section {
   width: 100%;
-  padding: 2rem 0;
+  padding: 0;
+  padding-bottom: 2rem;
   container-type: inline-size;
   container-name: section;
 }
+section.has-background {
+  padding: 2rem 0;
+}
 section-header img {
   max-width: 375px;
   width: 100%;
@@ -879,7 +883,7 @@ button {
   .pagination {
     display:none;
   }
-  h1 {
-    margin-top: 1rem !important;
+  .greetings {
+    margin: 1rem 0;
   }
 }
diff --git a/index.html b/index.html
index 9de4b3c..2a35323 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
         cart-count="21"
     ></custom-navbar>
  
-    <div class="container">
+    <div class="container greetings">
         <h1 class="typography headline xl">Good morning, Amanda</h1>
     </div>
  
@@ -189,7 +189,7 @@ <h1 class="typography headline xl">Good morning, Amanda</h1>
     
     <!-- Include other sections as needed -->
 
-    <section class="colorize">
+    <section class="colorize has-background">
         <div class="container">
             <div class="swiper wb-swiper-2">
                 <section-header avatar="https://object-storage.shipt.com/stores/27-061819185725_4aa474376b672e5e20d95db190d54ca5.png?fio=true&auto=webp&format=pjpg&quality=75%2C75&width=64" alt="Target">
diff --git a/retailer.html b/retailer.html
index 9c77a66..5faaf33 100644
--- a/retailer.html
+++ b/retailer.html
@@ -284,7 +284,7 @@
     </section>
 
     <!-- Image header and color bg -->
-    <section class="colorize-red">
+    <section class="colorize-red has-background">
       <div class="container">
         <div class="swiper wb-swiper-5">
           <section-header alt="Target" display-type="image">
@@ -659,7 +659,7 @@
 
     <!-- Image BG -->
     <section
-      class="surface-dark"
+      class="surface-dark has-background"
       style="background-image: url(assets/grass.png)"
     >
       <div class="container">
@@ -864,11 +864,11 @@
           freemode: true,
           spaceBetween: 8,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 3.25, slidesPerGroup: 3 },
-            768: { freemode: true, slidesPerView: 5.25, slidesPerGroup: 5 },
-            1280: { freemode: false, slidesPerView: 6, slidesPerGroup: 6 },
-            1440: { freemode: false, slidesPerView: 7, slidesPerGroup: 7 },
-            1880: { freemode: false, slidesPerView: 8, slidesPerGroup: 8 },
+            480: { slidesPerView: 3.25, slidesPerGroup: 3 },
+            768: { slidesPerView: 5.25, slidesPerGroup: 5 },
+            1280: { slidesPerView: 6, slidesPerGroup: 6 },
+            1440: { slidesPerView: 7, slidesPerGroup: 7 },
+            1880: { slidesPerView: 8, slidesPerGroup: 8 },
           },
           navigation: { nextEl: ".wb-next-1", prevEl: ".wb-prev-1" },
         });
@@ -881,11 +881,11 @@
           freemode: true,
           spaceBetween: 8,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 3.25, slidesPerGroup: 3 },
-            768: { freemode: true, slidesPerView: 5, slidesPerGroup: 5 },
-            1280: { freemode: false, slidesPerView: 6, slidesPerGroup: 6 },
-            1440: { freemode: false, slidesPerView: 7, slidesPerGroup: 7 },
-            1880: { freemode: false, slidesPerView: 8, slidesPerGroup: 8 },
+            480: { slidesPerView: 3.25, slidesPerGroup: 3 },
+            768: { slidesPerView: 5, slidesPerGroup: 5 },
+            1280: { slidesPerView: 6, slidesPerGroup: 6 },
+            1440: { slidesPerView: 7, slidesPerGroup: 7 },
+            1880: { slidesPerView: 8, slidesPerGroup: 8 },
           },
           navigation: { nextEl: ".wb-next-2", prevEl: ".wb-prev-2" },
         });
@@ -897,11 +897,11 @@
           freemode: true,
           spaceBetween: 8,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 1.1, slidesPerGroup: 1.5 },
-            768: { freemode: true, slidesPerView: 2.25, slidesPerGroup: 2.25 },
-            1280: { freemode: false, slidesPerView: 3, slidesPerGroup: 3 },
-            1440: { freemode: false, slidesPerView: 4, slidesPerGroup: 4 },
-            1880: { freemode: false, slidesPerView: 4, slidesPerGroup: 4 },
+            480: { slidesPerView: 1.1, slidesPerGroup: 1.5 },
+            768: { slidesPerView: 2.25, slidesPerGroup: 2.25 },
+            1280: { slidesPerView: 3, slidesPerGroup: 3 },
+            1440: { slidesPerView: 4, slidesPerGroup: 4 },
+            1880: { slidesPerView: 4, slidesPerGroup: 4 },
           },
           navigation: { nextEl: ".wb-next-4", prevEl: ".wb-prev-4" },
         });
@@ -914,8 +914,8 @@
           spaceBetween: 8,
           freemode: true,
           breakpoints: {
-            480: { freemode: true, slidesPerView: 3, slidesPerGroup: 3 },
-            768: { freemode: true, slidesPerView: 5, slidesPerGroup: 5 },
+            480: { slidesPerView: 3, slidesPerGroup: 3 },
+            768: { slidesPerView: 5, slidesPerGroup: 5 },
             1280: { slidesPerView: 6, slidesPerGroup: 6 },
             1440: { slidesPerView: 6, slidesPerGroup: 7 },
             1880: { slidesPerView: 8, slidesPerGroup: 8 },