responsive breakpoints framework

web/themes/custom/leshed/assets/scss/partials/pages/_home.scss

@@ -6,6 +6,7 @@
 
 @use "../abstracts/variables" as *;
 @use "../abstracts/nodes-on-liste" as *;
+@use "../abstracts/breakpoints" as *;
 
 
 div.layout.layout--twocol-section--50-50.layout--twocol-section{
@@ -34,7 +35,7 @@ div.layout.layout--twocol-section--50-50.layout--twocol-section{
     }
   }
 
-  @media (max-width:431px) {
+  @media #{$narrow}{
     &{
       display:block;
       div.layout__region{

web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-projets.scss

@@ -7,6 +7,7 @@
 
 @use "../abstracts/variables" as *;
 @use "../abstracts/nodes-on-liste" as *;
+@use "../abstracts/breakpoints" as *;
 
 
 div.views-archives-projets{
@@ -27,9 +28,8 @@ div.views-archives-projets{
   }
 
 
-  // ONLY FOR DESKTOP
-  @media (min-width:769px){
-    // gap: 2em;
+  // DESKTOP + TABLETTE (≥ 768) — gouttière + rangées de 4.
+  @media #{$desktop-et-tablette}{
     gap: $colsgap;
     div.views-row{
         flex: 1 0 calc(25% - $colsgap);
@@ -37,9 +37,8 @@ div.views-archives-projets{
     }
   }
 
-  // ONLY FOR MOBILE
-  @media (max-width:768px){
-    // gap: 2em;
+  // MOBILE (≤ 767) : 2 par ligne.
+  @media #{$mobile}{
     gap: $colsgap;
     div.views-row{
         flex: 1 0 calc(50% - $colsgap);