From 51789f8164dcde9a0686fe81969461d939e58a2b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 12 Oct 2021 20:26:44 +0100
Subject: [PATCH] :iphone: Improved responsivness for large items with grid
 layout

---
 src/components/LinkItems/Section.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 2e43a56a..ef77f144 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -13,7 +13,7 @@
       No Items to Show Yet
     </div>
     <div v-else
-      :class="`there-are-items ${isGridLayout? 'item-group-grid': ''}`"
+      :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
       :style="gridStyle"
     >
       <Item
@@ -213,6 +213,16 @@ export default {
     @include big-screen-up { --item-col-count: 12; }
     grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
   }
+  .there-are-items.inner-size-large {
+    display: grid;
+    @include phone { --item-col-count: 1; }
+    @include tablet { --item-col-count: 2; }
+    @include laptop { --item-col-count: 3; }
+    @include monitor { --item-col-count: 5; }
+    @include big-screen { --item-col-count: 6; }
+    @include big-screen-up { --item-col-count: 8; }
+    grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
+  }
 }
 
 </style>