Update grid usage on homepage

Author: rossta

app/javascript/css/layout.scss

@@ -17,7 +17,6 @@
 
 body > *,
 main > *,
-.grid,
 .header-content,
 .section-content,
 .footer-content,
@@ -30,6 +29,10 @@ main > * {
   row-gap: var(--grid-gutter);
 }
 
+.grid-gap {
+  grid-gap: var(--grid-gutter);
+}
+
 body > *,
 main > *,
 .header-content {
@@ -40,10 +43,6 @@ main > *,
   grid-template-columns: 2fr;
 }
 
-.grid {
-  grid-gap: var(--grid-gutter);
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }

app/views/components/pages/summary.rb

@@ -24,7 +24,7 @@ def initialize(title: nil, description: nil, published_on: nil, image: nil, requ
   end
 
   def view_template
-    div(class: "page-summary grid lg:grid-cols-2 lg:grid-flow-col") do
+    div(class: "page-summary grid grid-gap lg:grid-cols-2 lg:grid-flow-col") do
       case @side
       when "left"
         content(class: "grid grid-row-tight lg:text-right lg:grid-column-start-1")