Reuse govuk grid

app/frontend/styles/_data_box.scss

@@ -1,53 +1,5 @@
-.app-data-box-group {
-  @include govuk-font($size: 19);
-  font-weight: bold;
-  white-space: nowrap;
-}
-
-@media (min-width: 54.0625em) {
-  .app-data-box-group-one-third {
-    display: flex;
-    justify-content: space-between;
-    column-gap: govuk-spacing(4);
-    width: 100%;
-    min-width: 733.33px;
-  }
-}
-@media (min-width: 54.0625em) {
-  .app-data-box-one-third {
-    width: 33.3333333%;
-    float: left;
-  }
-}
-@media (min-width: 54.0625em) {
-  .app-data-box__underline {
-    min-width: 733.33px;
-  }
-}
-@media (min-width: 54.0625em) {
-  .app-data-box-group-one-half {
-    display: flex;
-    justify-content: space-between;
-    column-gap: govuk-spacing(4);
-    width: 100%;
-    min-width: 733.33px;
-  }
-}
-@media (min-width: 54.0625em) {
-  .app-data-box-one-half {
-    width: 50%;
-    float: left;
-  }
-}
-@media (min-width: 54.0625em) {
-  .app-data-box-one-half__underline {
-    min-width: 733.33px;
-  }
-}
-
 .app-data-box__upper {
   @include govuk-responsive-margin(2, "bottom");
-  @include govuk-responsive-padding(4);
 
   background-color: govuk-colour("light-grey");
   color: govuk-colour("blue");
@@ -55,11 +7,16 @@
 
 .app-data-box__lower {
   @include govuk-responsive-margin(4, "bottom");
-  @include govuk-responsive-padding(4);
 
   background-color: govuk-colour("blue");
 }
 
+.app-data-box {
+  @include govuk-responsive-padding(4);
+  font-weight: bold;
+  white-space: nowrap;
+}
+
 .app-data-box__count {
   font-size: 48px;
   color: govuk-colour("blue");

app/views/home/_data_box.html.erb

@@ -1,9 +1,9 @@
-<div class="app-data-box__upper">
+<div class="app-data-box app-data-box__upper">
   <div class="app-data-box__count">
     <a><%= govuk_link_to data_count(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state govuk-link--no-underline" %></a>
   </div>
   <a><%= govuk_link_to data_subheading(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state" %></a>
 </div>
-<div class="app-data-box__lower">
+<div class="app-data-box app-data-box__lower">
   <%= govuk_link_to view_all_text(type), view_all_path(type), class: "govuk-link--inverse" %>
 </div>

app/views/home/index.html.erb

@@ -1,48 +1,43 @@
 <div class="govuk-grid-row">
   <div class="govuk-width-container">
-    <div class="govuk-grid-column-two-thirds">
       <div class="govuk-grid-row govuk-!-margin-bottom-7">
         <span class="govuk-body-l"><%= "Welcome back, #{@current_user.name}" %></span>
         <h1 class="govuk-heading-l"><%= heading_for_user_role(@current_user) %></h1>
       </div>
       <div class="govuk-grid-row">
-        <div class="app-data-box-group">
+        <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0 govuk-!-padding-right-0">
           <% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?) %>
-            <div class="app-data-box-group-one-third">
-              <div class="app-data-box-one-third">
+            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
               <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
             </div>
-              <div class="app-data-box-one-third">
+            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
               <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
             </div>
-              <div class="app-data-box-one-third">
+            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
               <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
             </div>
-            </div>
           <% else %>
-            <div class="app-data-box-group-one-half">
-              <div class="app-data-box-one-half">
+            <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
               <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
             </div>
             <% if @current_user.data_coordinator? %>
-                <div class="app-data-box-one-half">
+              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
                 <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
               </div>
             <% elsif @current_user.sales_logs.present? %>
-                <div class="app-data-box-one-half">
+              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
                 <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
               </div>
             <% else %>
-                <div class="app-data-box-one-half">
+              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
                 <span><%= render partial: "home/data_box", locals: { type: "misc" } %></span>
               </div>
             <% end %>
-            </div>
           <% end %>
         </div>
       </div>
       <div class="govuk-grid-row">
-        <div class="app-data-box__underline">
+        <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0">
           <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
         </div>
       </div>