chore: reworked code, removed unnecessary code and added variables

RedTurtle · Nov 28, 2023 · 36208ad · 36208ad
1 parent e7a4073
commit 36208ad
Showing 1 changed file with 10 additions and 23 deletions.
diff --git a/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss
@@ -5,6 +5,10 @@
     gap: 1.3rem;
     -ms-grid-columns: 1fr 1.3rem 1fr 1.3rem 1fr;
     grid-template-columns: 1fr 1fr 1fr;
+
+    .read-more a.read-more {
+      flex-direction: row;
+    }
   }
 
   .card-wrapper {
@@ -39,7 +43,7 @@
   }
 
   // smartphone
-  @media (max-width: 585px) {
+  @media (max-width: #{map-get($grid-breakpoints, sm)}) {
     .bandi-in-evidence-cards-wrapper {
       .card-wrapper {
         width: 100%;
@@ -52,33 +56,17 @@
 
   // tablet
   .bandi-in-evidence-cards-wrapper {
-    @media (min-width: 767px) and (max-width: 1367px) {
+    @media (min-width: #{map-get($grid-breakpoints, md)}) and  (max-width: #{map-get($grid-breakpoints, xxl)}) {
       grid-template-columns: auto auto;
-
-      div.read-more a.read-more {
-        flex-direction: row;
-      }
     }
 
-    @media (min-width: 768px) and (max-width: 991px) {
+    @media (min-width: #{map-get($grid-breakpoints, md)}) and (max-width: #{map-get($grid-breakpoints, lg)}) {
       gap: 1rem;
     }
 
-    @media (min-width: 568px) and (max-width: 767px) {
+    @media (min-width: #{map-get($grid-breakpoints, sm)}) and (max-width: #{map-get($grid-breakpoints, md)}) {
       display: block !important;
     }
-
-    .bando-dati {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      justify-content: flex-end;
-    }
-    @media (max-width: 991px) {
-      .read-more a.read-more {
-        flex-direction: row;
-      }
-    }
   }
 
   .bando-description {
@@ -131,9 +119,8 @@
       bottom: 0;
       padding-top: 0.75rem;
 
-      @media (max-width: 585px) {
+      @media (max-width: #{map-get($grid-breakpoints, sm)}) {
         display: flex;
-        flex-direction: row;
         align-items: center;
         color: $analogue-1-a7;
         font-size: 0.77778rem;
@@ -142,7 +129,7 @@
         text-transform: uppercase;
       }
     }
-    @media (max-width: 585px) {
+    @media (max-width: #{map-get($grid-breakpoints, sm)}) {
       margin-top: 0;
     }
   }