diff --git a/styles/base.css b/styles/base.css
index 8801edf..7806b03 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -14,6 +14,10 @@
   --color-brand: #F59134;
 }
 
+@custom-media --until-sm (max-width: 30em);
+@custom-media --until-md (max-width: 48em);
+@custom-media --until-lg (max-width: 61.875em);
+
 @font-face {
   font-family: 'DIN';
   src: url('/assets/fonts/clanot-news.otf');
diff --git a/styles/components/item-list.css b/styles/components/item-list.css
index bb698d8..32bb374 100644
--- a/styles/components/item-list.css
+++ b/styles/components/item-list.css
@@ -1,4 +1,5 @@
 .item-list {
+  margin: 0 0 25px;
   &__header {
     margin-bottom: 20px;
   }
diff --git a/styles/components/page.css b/styles/components/page.css
index bca3bfb..ea4d2ba 100644
--- a/styles/components/page.css
+++ b/styles/components/page.css
@@ -1,8 +1,8 @@
 .page {
-  width: 1200px;
+  max-width: 1200px;
   min-height: 100%;
   margin: 0 auto;
-  padding: 0 10px;
+  padding: 0 15px;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
diff --git a/styles/components/quadrant-grid.css b/styles/components/quadrant-grid.css
index 70e1ad9..0bb23e8 100644
--- a/styles/components/quadrant-grid.css
+++ b/styles/components/quadrant-grid.css
@@ -6,5 +6,8 @@
   &__quadrant {
     flex: 0 0 45%;
     margin-bottom: 40px;
+    @media (--until-lg) {
+      flex-basis: 100%;
+    }
   }
 }
diff --git a/styles/components/quadrant-section.css b/styles/components/quadrant-section.css
index 3f6f655..b9785df 100644
--- a/styles/components/quadrant-section.css
+++ b/styles/components/quadrant-section.css
@@ -5,11 +5,17 @@
 
   &__rings {
     display: flex;
+    flex-wrap: wrap;
   }
 
   &__ring {
     box-sizing: border-box;
     padding: 0 8px;
     flex: 0 0 25%;
+    margin: 0 0 25px;
+    @media (--until-sm) {
+      flex-basis: 50%;
+
+    }
   }
 }