From 66cf681bc85326cd5f19468dfa85debe54bd94c3 Mon Sep 17 00:00:00 2001
From: comfysage <67917529+comfysage@users.noreply.github.com>
Date: Sat, 14 Dec 2024 10:41:57 +0000
Subject: [PATCH] refactor(styles): use container queries

---
 styles/layouts/base.scss          | 1 +
 styles/partials/blog-preview.scss | 2 +-
 styles/partials/donations.scss    | 2 +-
 styles/partials/project.scss      | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

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;
   }