diff --git a/src/lib/content.scss b/src/lib/content.scss
index e951948..abce122 100644
--- a/src/lib/content.scss
+++ b/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;
     }
 }
diff --git a/src/lib/nav.scss b/src/lib/nav.scss
index ff39e49..1ad61e1 100644
--- a/src/lib/nav.scss
+++ b/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;
         }
     }
diff --git a/src/lib/section.scss b/src/lib/section.scss
index aff9d33..183688f 100644
--- a/src/lib/section.scss
+++ b/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;
         }
     }
diff --git a/src/lib/typo.scss b/src/lib/typo.scss
index 2d7db4b..7751294 100644
--- a/src/lib/typo.scss
+++ b/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;
     }
diff --git a/src/lib/variables.scss b/src/lib/variables.scss
index fbab2b5..3154ae9 100644
--- a/src/lib/variables.scss
+++ b/src/lib/variables.scss
@@ -1,3 +1,5 @@
+$mobile-breakpoint: "max-width: 768px";
+
 :root {
     --color: #161616;
 
diff --git a/src/pages/index/news.scss b/src/pages/index/news.scss
index 4e909f9..1c705ab 100644
--- a/src/pages/index/news.scss
+++ b/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;
         }
diff --git a/src/pages/index/presentation.scss b/src/pages/index/presentation.scss
index 4c94788..59eae43 100644
--- a/src/pages/index/presentation.scss
+++ b/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;
     }
 }