Finish styling for homepage

app/assets/stylesheets/welcome.scss

@@ -25,11 +25,27 @@
   font-size: 20px;
 }
 
-img.framework-wheel {
+.framework-wheel-container {
+  @extend .d-flex;
+  @extend .flex-column;
+  @extend .align-items-center;
+
+  img {
     width: 442px;
     max-width: 100%;
   }
 
+  p {
+    color: $gray-1;
+    font-size: 12px;
+    max-width: 410px;
+    @extend .text-center;
+    @extend .bg-color-gray-3;
+    @extend .p-3;
+    @extend .border-radius-8;
+  }
+}
+
 .welcome-controls {
   @extend .py-5;
 }

app/views/home/index.html.erb

@@ -24,8 +24,14 @@
 <div class="bg-color-light-blue pt-12 pb-11">
   <div class="container">
     <div class="row">
-      <div class="col-lg-5">
+      <div class="col-lg-5 framework-wheel-container">
-        <%= image_tag('framework_wheel.png', alt: 'MCIEA School Quality Framework Wheel', class: 'framework-wheel') %>
+        <div>
+          <%= image_tag('framework_wheel.png', alt: 'MCIEA School Quality Framework Wheel') %>
+        </div>
+
+        <p class="mt-5">The School Quality Measures Framework aims to describe the full measure of what makes a good
+          school. The three outer categories are essential inputs to school quality that influence the center two key
+          outcomes.</p>
       </div>
       <div class="col-lg-7">
         <h2 class="mb-4">School Quality Measures Framework</h2>