diff --git a/styles/layouts/base.scss b/styles/layouts/base.scss
index 9042de0..547c6af 100644
--- a/styles/layouts/base.scss
+++ b/styles/layouts/base.scss
@@ -21,6 +21,7 @@ body {
 
 .main-page {
   flex: 1;
+  container: main-page / inline-size;
 }
 
 a {
diff --git a/styles/partials/blog-preview.scss b/styles/partials/blog-preview.scss
index 41fff9f..b654f0e 100644
--- a/styles/partials/blog-preview.scss
+++ b/styles/partials/blog-preview.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
+@container main-page (width < 768px) {
   .blog-previews {
     grid-template-columns: 1fr;
   }
diff --git a/styles/partials/donations.scss b/styles/partials/donations.scss
index 1d6534f..9386e81 100644
--- a/styles/partials/donations.scss
+++ b/styles/partials/donations.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
+@container main-page (width < 768px) {
   .donations {
     grid-template-columns: 1fr 1fr;
   }
diff --git a/styles/partials/project.scss b/styles/partials/project.scss
index 0561acc..ff8a57a 100644
--- a/styles/partials/project.scss
+++ b/styles/partials/project.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
+@container main-page (width < 768px) {
   .projects {
     grid-template-columns: 1fr;
   }