footer style adjust - min-width breaks

vue-theme/src/components/footer.vue

@@ -2,10 +2,10 @@
 .footer-wrapper.t-up.t-sans
     footer.main.w-max
         //- address contact
-        ul.f-col.start.b-dot.b-radius
+        ul.f-col.start
             li.b-dot.b-radius
                 h5 Craft in America
-                ul.b-dot.b-radius
+                ul
                     li 8415 W. Third St.
                     li Los Angeles, CA 90048
                     li Tues–Sat, 12PM–6PM
@@ -15,7 +15,7 @@
                         router-link(to="mailto:info@craftinamerica.org") info@craftinamerica.org
             li.b-dot.b-radius
                 h5 Connect with Us
-                ul.f-row.b-dot.b-radius
+                ul.f-row
                     li
                         h2.t-cntr
                             a(href="https://www.facebook.com/CraftinAmerica") FB<br>
@@ -41,7 +41,7 @@
                     a(href="") Join email list
                             
         //- menu links
-        ul.f-col.start.b-dot.b-radius
+        ul.f-col.start
             li.b-dot.b-radius
                 h5
                     router-link(to="/episodes") PBS Series
@@ -97,7 +97,7 @@
                     li Press Releases
                     li In the News
     .sub-footer.f-col.start
-        h5 Craft in America &copy; 2010&ndash;2021
+        h6 Craft in America &copy; 2010&ndash;2021
         //- actually the bottom of the page
 
 </template>
@@ -120,7 +120,7 @@
         // ALL <ul> tags
         ul
             list-style: none
-            width: 100%
+            /* width: 100% */
             > li
                 width: 100%
         // OUTER <ul> tags
@@ -157,10 +157,11 @@
     .sub-footer
         background-color: #820000
         padding: $ms--4
-        h5
+        h6
             font-size: $ms--2
             color: $cia_grey
-
+            margin: 0
+    /* 768px */
     @media (min-width: $medium)
         footer.main > ul
             /* background-color: darkgreen */
@@ -170,16 +171,16 @@
                 flex-direction: row
                 flex-wrap: wrap
                 > li
-                    width: 50%
-
+                    width: 32%
+    /* 960px */
     @media (min-width: $large)
         footer.main > ul
             /* background-color: purple */
             background-color: $cia_red
             &:nth-child(n+2)
                 > li
-                    width: 33%
-
+                    width: 23%
+    /* 1080px */
     @media (min-width: $extra-large)
         footer.main > ul
             /* background-color: rebeccapurple */
@@ -187,8 +188,8 @@
             &:nth-child(n+2)
                 margin: 0 0 $ms-2 0
                 > li
-                    width: 25%
-
+                    width: 23%
+    /* 1200px */
     @media (min-width: $huge)
         footer.main 
             max-width: $max-width
@@ -196,7 +197,7 @@
             > ul
                 /* background-color: orange */
                 background-color: $cia_red
-
+    /* 1440px */
     @media (min-width: $ultra)
         footer.main 
             > ul