Revert "Reuse govuk grid"

This reverts commit 8c71f5d9ed.

app/frontend/styles/_data_box.scss

@@ -1,5 +1,53 @@
+.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");
@@ -7,16 +55,11 @@
 
 .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 app-data-box__upper">
+<div class="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 app-data-box__lower">
+<div class="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,43 +1,48 @@
 <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="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0 govuk-!-padding-right-0">
+        <div class="app-data-box-group">
           <% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?) %>
-            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
+            <div class="app-data-box-group-one-third">
+              <div class="app-data-box-one-third">
                 <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
               </div>
-            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
+              <div class="app-data-box-one-third">
                 <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
               </div>
-            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
+              <div class="app-data-box-one-third">
                 <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
               </div>
+            </div>
           <% else %>
-            <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
+            <div class="app-data-box-group-one-half">
+              <div class="app-data-box-one-half">
                 <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
               </div>
               <% if @current_user.data_coordinator? %>
-              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
+                <div class="app-data-box-one-half">
                   <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
                 </div>
               <% elsif @current_user.sales_logs.present? %>
-              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
+                <div class="app-data-box-one-half">
                   <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
                 </div>
               <% else %>
-              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
+                <div class="app-data-box-one-half">
                   <span><%= render partial: "home/data_box", locals: { type: "misc" } %></span>
                 </div>
               <% end %>
+            </div>
           <% end %>
         </div>
       </div>
       <div class="govuk-grid-row">
-        <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0">
+        <div class="app-data-box__underline">
           <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
         </div>
       </div>