Use CSS Grid for page columns

web/themes/custom/opdavies/templates/layout/page.html.twig

@@ -78,7 +78,7 @@
         </div>
       </div>
     </div>
-    <div class="container mx-auto p-4">
+    <div class="{{ is_front ? 'max-w-5xl' : 'max-w-3xl' }} mx-auto p-4">
 
       {{ page.secondary_menu }}
 
@@ -91,29 +91,15 @@
       <main role="main">
         <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
-        <div class="
+        <div class="grid lg:grid-cols-4 gap-8">
-          -mx-4
+          <div class="{{ not page.sidebar_second ? 'lg:col-span-4' : 'lg:col-span-3' }}">
-          {% if page.sidebar_first or page.sidebar_second %}
+            <div class="max-w-3xl">
-            md:flex
+              {{ page.content }}
-          {% endif %}
+            </div>
-        ">
-          <div class="
-            p-4
-            {% if page.sidebar_first or page.sidebar_second %}
-              md:flex-1
-            {% endif %}
-          ">
-            {{ page.content }}
           </div>{# /.layout-content #}
 
-          {% if page.sidebar_first %}
-            <aside class="md:w-1/4 p-4" role="complementary">
-              {{ page.sidebar_first }}
-            </aside>
-          {% endif %}
-
           {% if page.sidebar_second %}
-            <aside class="w-full md:w-2/5 lg:w-1/3 px-6" role="complementary">
+            <aside role="complementary">
               {{ page.sidebar_second }}
             </aside>
           {% endif %}