From 4de43fd34eb0d0675023e86d6f78adfe0a335ef0 Mon Sep 17 00:00:00 2001
From: pattonwebz <will@pattonwebz.com>
Date: Tue, 25 Jun 2024 19:41:38 +0100
Subject: [PATCH] Add replacement grid styles for the summary panel list items

---
 .../sass/accessibility-checker-admin.scss     | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/admin/sass/accessibility-checker-admin.scss b/src/admin/sass/accessibility-checker-admin.scss
index 7756643e..475d08e5 100644
--- a/src/admin/sass/accessibility-checker-admin.scss
+++ b/src/admin/sass/accessibility-checker-admin.scss
@@ -138,6 +138,37 @@
     }
 
     .edac-summary {
+
+      &-grid {
+	    display: grid;
+		grid-template-columns: repeat(2, 1fr);
+	    grid-gap: 10px;
+
+		@include breakpoint(md) {
+		  grid-template-columns: 2fr 1fr 1fr;
+		  grid-template-rows: repeat(2, 1fr);
+		  grid-gap: 10px;
+		}
+
+		@include breakpoint(lg) {
+		  grid-template-columns: 2fr 1.5fr 1.5fr;
+		}
+
+	    > li {
+			margin: 0;
+
+			&:first-child {
+				grid-column: span 2;
+				grid-row: span 2;
+				display: flex;
+
+				@include breakpoint(md) {
+				  grid-column: span 1;
+				}
+			}
+		}
+      }
+
       &-notice {
         background-color: $color-gray-lightest;
         box-shadow: inset 0px 0px 0px 1px $color-gray-light;
@@ -148,11 +179,8 @@
       }
 
       &-total {
-        width: 100%;
         background-color: $color-gray-lightest;
         box-shadow: inset 0px 0px 0px 1px $color-gray-light;
-        float: left;
-        margin-bottom: 20px;
         padding: 15px;
         text-align: center;
         $progress-circle-size: 250px;
@@ -162,17 +190,8 @@
           padding: 25px;
         }
 
-        @include breakpoint(lg) {
-          padding: 50px 15px;
-          width: calc(50% - 15px);
-        }
-
-        @include breakpoint(xl) {
-          padding: 50px 25px;
-          width: calc(40% - 15px);
-        }
-
         &-mobile {
+		  width: 100%;
           color: $color-dark-gray;
 
           @include breakpoint(xs) {
@@ -196,6 +215,8 @@
         }
 
         &-progress-circle {
+		  margin: auto;
+
           font-size: 20px;
           position: relative;
           padding: 0;
@@ -316,10 +337,7 @@
       }
 
       &-stat {
-        width: 100%;
         height: 125px;
-        float: left;
-        margin: 0px 12px 12px 0;
         padding-top: 25px;
         background-position: 10px 10px;
         background-repeat: no-repeat;
@@ -328,7 +346,6 @@
         @include breakpoint(xs) {
           padding-top: 50px;
           height: 175px;
-          width: calc(50% - 6px);
         }
 
         &:nth-child(2),