refactor: use sass variable for media queries breakpoints

src/lib/content.scss

@@ -3,7 +3,7 @@
     padding: 0 var(--space-small);
     max-width: 1100px;
 
-    @media (max-width: 768px) {
+    @media ($mobile-breakpoint) {
         margin-top: 0;
     }
 }

src/lib/nav.scss

@@ -30,7 +30,7 @@
         margin: 0 -50vw;
         padding: 0 50vw;
 
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
             max-height: 0;
             display: flex;
             flex-direction: column;
@@ -44,7 +44,7 @@
         justify-content: space-around;
         padding: 0;
         margin: 0;
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
             flex-direction: column;
         }
     }
@@ -73,13 +73,13 @@
     }
 
     &--toggle-button {
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
             display: block;
         }
     }
 
     &__open &--menu {
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
            max-height: 100vh;
         }
     }

src/lib/section.scss

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
 
-    @media (max-width: 768px) {
+    @media ($mobile-breakpoint) {
         margin-bottom: var(--space-large);
     }
 
@@ -12,7 +12,7 @@
         flex-direction: column;
         align-items: center;
 
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
             flex-direction: row;
             justify-content: center;
         }
@@ -23,7 +23,7 @@
             background: center / contain no-repeat var(--image);
             content: "";
 
-            @media (max-width: 768px) {
+            @media ($mobile-breakpoint) {
                 width: 50px;
                 height: 50px;
                 margin-right: var(--space-small);
@@ -40,7 +40,7 @@
         flex-direction: column;
         align-items: center;
 
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
             grid-area: 2 / 1 / 3 / 4;
         }
     }

src/lib/typo.scss

@@ -40,7 +40,7 @@ p {
 }
 
 
-@media (max-width: 768px) {
+@media ($mobile-breakpoint) {
     h1, h2, h3 {
         margin: 0 0 var(--space-small) 0;
     }

src/lib/variables.scss

@@ -1,3 +1,5 @@
+$mobile-breakpoint: "max-width: 768px";
+
 :root {
     --color: #161616;
 

src/pages/index/news.scss

@@ -15,7 +15,7 @@
         background: var(--dark);
         color: white;
         padding: var(--space-small) var(--space-medium);
-        @media (max-width: 768px) {
+        @media ($mobile-breakpoint) {
             grid-template-columns: auto;
             grid-template-rows: auto auto;
         }

src/pages/index/presentation.scss

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
     gap: var(--space-medium);
-    @media (max-width: 768px) {
+    @media ($mobile-breakpoint) {
         flex-direction: column;
     }
 }