First steps towards responsive radar

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');

styles/components/item-list.css

@@ -1,4 +1,5 @@
 .item-list {
+  margin: 0 0 25px;
   &__header {
     margin-bottom: 20px;
   }

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;

styles/components/quadrant-grid.css

@@ -6,5 +6,8 @@
   &__quadrant {
     flex: 0 0 45%;
     margin-bottom: 40px;
+    @media (--until-lg) {
+      flex-basis: 100%;
+    }
   }
 }

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