Basic styling of sections page

app/assets/stylesheets/application.postcss.css

@@ -1,4 +1,40 @@
 /* Entry point for your PostCSS build */
+
+body {
+    font-family: "Fira Sans", sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+}
+
+h4 {
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.body-container {
+    max-width: 1024px;
+    margin: 1rem auto;
+}
+
+.container {
+    background-color: #e6f8ff;
+    padding: 6rem 4rem;
+}
+
+.title-card-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 3rem;
+}
+
+.title-card-container {
+    text-decoration: none;
+    align-self: stretch;
+    color: black;
+    background-color: white;
+    padding: 1rem;
+}
+
 .politicians-listing {
     display: flex;
     flex-direction: row;
@@ -30,7 +66,7 @@
 
 .connections-grid {
     display: grid;
-    grid-template-columns: 25% 25% 25% 25%;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
 .connections-element {
@@ -38,3 +74,23 @@
     margin: 0.5em;
     padding: 1em;
 }
+
+@media (max-width: 1024px) {
+    .body-container {
+        max-width: 768px;
+    }
+
+    .title-card-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .body-container {
+        max-width: 512px;
+    }
+
+    .title-card-grid {
+        grid-template-columns: 1fr;
+    }
+}