Intro text & image

1 files changed, 30 insertions, 7 deletions

diff --git a/style.css b/style.css
index 3faee62..327d962 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,4 @@
 * {
-    padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
@@ -24,6 +23,7 @@
 
 body {
     font-family: OpenSans;
+    background-color: #eee;
 }
 
 header section {
@@ -52,22 +52,45 @@ header nav a, header nav a:visited {
 main {
     padding: 2em;
     max-width: 1000px;
-    text-align: center;
     margin-inline: auto;
 }
 
 main article {
+    padding-bottom: 2em;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.5em 1em;
+    gap: 2em;
+    grid-template-columns: auto;
+    grid-template-areas: "p1" "img" "p2" "p3";
+}
+
+@media (min-width: 500px) {
+    main article {
+        grid-template-columns: auto auto;
+        grid-template-areas: "p1 img" "p2 p2" "p3 p3";
+    }
+}
+
+@media (min-width: 650px) {
+    main article {
+        grid-template-areas: "p1 img" "p2 img" "p3 img";
+    }
 }
 
 main article img {
-    width: 100%;
+    max-width: 220px;
     height: auto;
+    object-fit: contain;
+    grid-area: img;
 }
 
-main article p {
-    grid-column: 1 / -1;
+main section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5em 1em;
     padding-bottom: 1.2em;
 }
+
+main section img {
+    width: 100%;
+    height: auto;
+}