Switch to grid so the items lay out next to each other.

app/assets/images/guage.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100"
-  height="200"
+  height="100"
-  zoomAndPan="magnify" viewBox="0 0 700 576" preserveAspectRatio="xMidYMid meet"
+  zoomAndPan="magnify" viewBox="0 0 760 600" preserveAspectRatio="xMidYMid meet"
   version="1.0">
   <defs>
     <clipPath id="a17a27a323">

app/assets/stylesheets/partials/_layout.scss

@@ -1,8 +1,15 @@
 .grid-container {
   display: grid;
+}
+
+.grid-container-400 {
   grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
 }
 
+.grid-container-200 {
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+}
+
 .grid-item {
   padding: 20px;
   grid-auto-flow: column;
@@ -50,7 +57,3 @@
   @extend .col-lg-7;
   @extend .col-xl-5;
 }
-
-.grid-container {
-  display: grid;
-}

app/views/home/index.html.erb

@@ -18,24 +18,22 @@
   <section class="bg-image children" ></section>
 
   <section class="row bg-primary text-white py-7 justify-content-center ">
-    <div class="col col-sm-10 col-md-8 col-lg-7 col-xl-5">
+    <div class="grid-container grid-container-200 dynamic-content">
-      <div class="row justify-content-center align-items-center">
+      <%= link_to sqm_index_path, class: "grid-item text-white text-decoration-none" do  %>
-
+        <div class="row justify-content-center">
-        <div class="dynamic-content py-5">
+          <%= image_tag "guage.svg", size: "100x100" %>
-          <%= link_to sqm_index_path, class: "row text-white text-decoration-none" do  %>
+          <h2 class="fs-5 mt-5 mb-3 text-decoration-underline">School Quality Measures</h2> 
-            <%= image_tag "guage.svg", size: "100x100" %>
+          <p>Stakeholders identify what is most important to know about school quality. Multiple measures provide a robust picture of school strengths and areas for improvement.</p>
-            <h2 class="fs-5 mt-4 mb-3 text-decoration-underline">School Quality Measures</h2> 
-            <p>Stakeholders identify what is most important to know about school quality. Multiple measures provide a robust picture of school strengths and areas for improvement.</p>
-          <% end %>
         </div>
-        <div class="dynamic-content py-5">
+      <% end %>
-          <%= link_to sqm_index_path, class: "row text-white text-decoration-none" do  %>
+
-            <%= image_tag "portfolio.svg", size: "100x100" %>
+      <%= link_to sqm_index_path, class: "grid-item text-white text-decoration-none" do  %>
-            <h2 class="fs-5 mt-4 mb-3 text-decoration-underline">Performance Assessments</h2> 
+        <div class="row justify-content-center">
-            <p>Teachers lead the design of curriculum-embedded performance assessments and the scoring of student work. Students demonstrate what they know and can do through real-world application.</p>
+        <%= image_tag "portfolio.svg", size: "100x100" %>
-          <% end %>
+        <h2 class="fs-5 mt-5 mb-3 text-decoration-underline">Performance Assessments</h2> 
+        <p>Teachers lead the design of curriculum-embedded performance assessments and the scoring of student work. Students demonstrate what they know and can do through real-world application.</p>
         </div>
-      </div>
+      <% end %>
     </div>
   </section>
 </div>