2 files changed, 24 insertions, 19 deletions

diff --git a/index.html b/index.html
index 98a5f04..f988da1 100644
--- a/index.html
+++ b/index.html
@@ -38,10 +38,10 @@
         <main>
             <div class="wrapper">
                 <div>
-                    <div class="right-section">
+                    <div class="cell">
                         <h2>Paper based resources</h2>
                         <hr class="divider">
-                        <div class="left-section-grid">
+                        <div class="inner-grid">
                             <div>
                                 <img src="img/alphabet_cards_sq.jpg" alt=""/>
                             </div>
@@ -57,14 +57,15 @@
                         </div>
                     </div>
 
-                    <div class="right-section">
+                    <div class="cell">
                         <h2>Hand sewn resources</h2>
+                        <hr class="divider">
                         <div>
                             <img src="img/alphabet_sq.jpg" alt="Alphabet square"/>
                         </div>
                     </div>
                     
-                    <div class="right-section">
+                    <div class="cell">
                         <h2>Section 2 title</h2>
                         <p>
                         Welcome to my gallery of creativity. Here you'll find a collection of my latest works, from paintings to pottery, all lovingly crafted by hand.
@@ -72,7 +73,7 @@
                     </div>
 
                 </div>
-                <div class="right-section">
+                <div class="cell">
                     <h2>Reviews</h2>
                     <hr class="divider">
                     <div>
diff --git a/style.css b/style.css
index 3880ce7..394ceab 100644
--- a/style.css
+++ b/style.css
@@ -19,11 +19,6 @@ body {
     background: rgb(224, 221, 217, 0.27);
 }
 
-@media (min-width: 600px) {
-  .wrapper { grid-template-columns: 3fr 1fr; }
-  .right-section p { font-size: 1.4em; }
-}
-
 
 .container {
     max-width: 1200px;
@@ -33,12 +28,9 @@ body {
 }
 
 .cell {
-
-}
-
-.right-section {
     background: white;
-    margin-right: 20px;
+    margin: 20px;
+    padding-bottom: 10px;
     padding-left: 50px;
     padding-top: 20px;
     border: 0px solid;
@@ -59,7 +51,7 @@ body {
 /*     margin-left: 20px; */
 /* } */
 
-.right-section p {
+.cell p {
     color: rgb(37, 95, 140, 0.8);
     font-size: 1.2rem;
     padding-left: 15px;
@@ -80,6 +72,7 @@ q:after {
 
 img {
     border-radius: 20px;
+	margin-right: 20px;
     box-shadow: 5px 10px 2px lightgray;
     max-width: 400px;
     height: auto;
@@ -87,20 +80,31 @@ img {
 }
 
 
-.left-section-grid {
+.inner-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     margin: 10px 10px 10px 0px;
 }
 
-.left-section-grid p {
+.inner-grid p {
     font-size: 1.6rem;
     color: darkgray;
     padding-right: 50px;
     text-align: right;
 }
 
+/* Media query for narrow screens */
+@media only screen and (max-width: 600px) {
+  .inner-grid {
+    grid-template-columns: 1fr; /* Switch to single column layout */
+  }
+  .inner-grid p {
+	text-align: left;
+  }
+}
+
+
 .inner {
     display: grid;
     grid-template-columns: 1fr 1fr;