Change media queries for Landing Page A (#1290)

* Change media queries * lint fix
mozilla · Oct 25, 2021 · 145e1be · 145e1be
1 parent b4de7f3
commit 145e1be
Showing 1 changed file with 21 additions and 18 deletions.
diff --git a/static/scss/partials/landing/a.scss b/static/scss/partials/landing/a.scss
@@ -32,7 +32,7 @@
             border-bottom: 1px solid $color-light-gray-20;
         }
 
-        @media screen and ($mq-md) {
+        @media #{$mq-md} {
             padding-right: $layout-md;
         }
     }
@@ -56,7 +56,7 @@
         }
     }
 
-    @media screen and ($mq-md) {
+    @media #{$mq-md} {
         display: flex;
         gap: $spacing-2xl;
 
@@ -77,13 +77,13 @@
             }
         }
     }
-    @media screen and ($mq-lg) {
+    @media #{$mq-lg} {
 
         .has-hero-image {
             width: 400px;
         }
     }
-    @media screen and ($mq-xl) {
+    @media #{$mq-xl} {
 
         .has-hero-image {
             width: 550px;
@@ -169,19 +169,19 @@
     height: auto;
     padding: $layout-md 0;
 
-    @media screen and ($mq-lg) {
+    @media #{$mq-lg} {
         padding: 0;
     }
 }
 
 .c-plans {
     display: grid;
 
-    @media screen and ($mq-md){
+    @media #{$mq-md} {
         grid-template-columns: repeat(3, 1fr);
         column-gap: $spacing-2xl;
     }
-    @media screen and ($mq-lg){
+    @media #{$mq-lg} {
         grid-template-columns: repeat(5, 1fr);
         column-gap: $spacing-2xl;
     }
@@ -194,22 +194,21 @@
         row-gap: $spacing-md;
         grid-template-columns: 1fr;
 
-        @media screen and ($mq-sm){
+        @media #{$mq-sm} {
             padding: 0 $spacing-xl;
-
-            @media screen and ($mq-md){
-                grid-template-columns: 1fr 1fr;
-                row-gap: none;
-                padding: 0;
-                margin-top: 0;
-            }
+        }
+        @media #{$mq-md} {
+            grid-template-columns: 1fr 1fr;
+            row-gap: none;
+            padding: 0;
+            margin-top: 0;
         }
 
         .c-premium {
             grid-row-start: 1;
             border: 2px solid $color-purple-40;
 
-            @media screen and ($mq-md){
+            @media #{$mq-md} {
                 grid-row-start: auto;
             }
         }
@@ -249,6 +248,10 @@
                 padding-top: $spacing-md;
                 text-align: left;
 
+                .c-list {
+                    margin-left: $spacing-lg;
+                }
+
                 li {
                     padding-bottom: $spacing-md;
                 }
@@ -294,7 +297,7 @@
             padding: 0 $spacing-lg;
         }
 
-        @media screen and ($mq-lg) {
+        @media #{$mq-lg} {
             text-align: start;
             grid-column-start: span 2;
             grid-row-start: auto;
@@ -390,7 +393,7 @@
     }
 
     //Desktop view
-    @media screen and ($mq-lg) {
+    @media #{$mq-lg} {
         grid-template-columns: repeat(5, 1fr);
         column-gap: $spacing-md;