add grid

src/components/NarrativeIntro.vue

 <template>
   <section id="narrativeIntro">
-    <img src="@/assets/images/water_security_less-stylized.png" class="img" />
-    <div id="text2" class="text-container">
-      <p v-html="introText.paragraph1"></p>
-    </div>
-    <img src="@/assets/images/water_insecurity_less-stylized.png" class="img" />
-    <div id="text3" class="text-container quote">
-      <p v-html="introText.paragraph2"></p>
+    <div id="grid-container">
+      <div id="text2" class="text-container">
+        <p v-html="introText.paragraph1"></p>
+      </div>
+      <img src="@/assets/images/water_security_less-stylized.png" class="img" alt = "Stylized city-scape image with buildings in background and lush green grass surrouding pond in foreground."/>
+      <img src="@/assets/images/water_insecurity_less-stylized.png" class="img right-align" alt = "Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
+      <div id="text3" class="text-container quote">
+        <p v-html="introText.paragraph2"></p>
+      </div>
     </div>
     <div id="text4" class="text-container">
       <p v-html="introText.paragraph3"></p>
@@ -21,7 +23,6 @@
 import text from './../assets/text/text.js';
 
 const introText = text.components.introNarrative;
-
 </script>
 
 <style scoped>
@@ -58,7 +59,75 @@ const introText = text.components.introNarrative;
 }
 
 #narrativeIntro img {
+  width: 45%; /* Reduce the size of the images */
+}
+
+#grid-container {
+  display: grid;
+  max-width: 1600px;
+  margin: auto;
+  height: auto;
+  vertical-align: middle;
+  overflow: hidden;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "text2"
+    "image1"
+    "image2"
+    "text3";
+}
+
+@media screen and (min-width: 551px) {
+  #grid-container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "text2 image1"
+      "image2 text3";
+  }
+
+  #text2 {
+    grid-area: text2;
+  }
+
+  #text3 {
+    grid-area: text3;
+  }
+
+  #grid-container .img:nth-of-type(1) {
+    grid-area: image1;
+  }
+
+  #grid-container .img:nth-of-type(2) {
+    grid-area: image2;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  #grid-container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "image1"
+      "text2"
+      "image2"
+      "text3";
+  }
+
+  #text2 {
+    grid-area: text2;
+  }
+
+  #text3 {
+    grid-area: text3;
+  }
+
+  #grid-container .img:nth-of-type(1),
+  #grid-container .img:nth-of-type(2) {
+    width: 100%;
+  }
+}
+
+.right-align {
   display: block;
-  margin: 20px auto; /* Center the images and add space around them */
+  margin-left: auto;
 }
 </style>