From fef4df9f701877cf105581010e5e6c34b111b1bf Mon Sep 17 00:00:00 2001
From: Kim Nguyen <design@kimisgold.com>
Date: Thu, 11 Jul 2024 13:01:18 -0400
Subject: [PATCH] Prevent slick dots from overlapping with slider. #27

---
 css/sass/_screen.scss | 13 ++++++-------
 css/style.css         | 13 ++++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/css/sass/_screen.scss b/css/sass/_screen.scss
index 0e844b0..3698edd 100644
--- a/css/sass/_screen.scss
+++ b/css/sass/_screen.scss
@@ -1017,6 +1017,7 @@ footer {
 
 #featured .slick-autoplay-toggle-button {
     background-color: transparent;
+    bottom: 0;
 
     &:focus {
         color: $red;
@@ -1024,10 +1025,6 @@ footer {
     }
 }
 
-#featured .slick-list {
-    padding-bottom: $spacing-l;
-}
-
 #featured .slick-slide {
     min-height: 50vh;
 }
@@ -1037,9 +1034,11 @@ footer {
     width: 100%;
     text-align: center;
     @include de-list;
-    margin: 0;
-    bottom: (-1 * $base-line-height);
-    
+    margin: 0 0 0 auto;
+    position: relative;
+    width: calc(100% - 36px);
+    bottom: 0;
+    padding: $spacing-m;
 }
 
 #featured .slick-dots li {
diff --git a/css/style.css b/css/style.css
index 26a5d59..3a329e7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1453,17 +1453,13 @@ nav ul {
 @media screen {
   #featured .slick-autoplay-toggle-button {
     background-color: transparent;
+    bottom: 0;
   }
   #featured .slick-autoplay-toggle-button:focus {
     color: #C72E2E;
     outline: solid;
   }
 }
-@media screen {
-  #featured .slick-list {
-    padding-bottom: 24px;
-  }
-}
 @media screen {
   #featured .slick-slide {
     min-height: 50vh;
@@ -1476,8 +1472,11 @@ nav ul {
     text-align: center;
     list-style: none;
     padding: 0;
-    margin: 0;
-    bottom: -24px;
+    margin: 0 0 0 auto;
+    position: relative;
+    width: calc(100% - 36px);
+    bottom: 0;
+    padding: 12px;
   }
 }
 @media screen {