style: use flex for items grid

assets/css/pages/_collection.scss

@@ -1,27 +1,13 @@
 .site-content--section,
 .site-content--list {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: 0.2fr 1fr 0.2fr;
-  grid-template-rows: auto auto auto;
-  justify-items: center;
-  align-items: center;
-  grid-template-areas: 
-    "list-page-header list-page-header list-page-header"
-    "list-page-grid list-page-grid list-page-grid"
-    "list-page-footer list-page-footer list-page-footer";
-  margin-block-start: 5em;
-
-  @include mq("large") {
-    grid-template-areas: 
-      ". list-page-header ."
-      "list-page-grid list-page-grid list-page-grid"
-      ". list-page-footer .";
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 
   & .site-content__header {
-    grid-area: list-page-header;
+    inline-size: 100%;
     text-align: center;
+    margin-block-end: 2em;
 
     & .page-header__minor-links {
       text-align: center;
@@ -29,6 +15,8 @@
 
       & ul {
         list-style: none;
+        inline-size: fit-content;
+        margin-inline: auto;
 
         & li {
           float: inline-start;
@@ -73,29 +61,12 @@
   }
 
   & .site-content__body {
+    display: flex;
+    flex-wrap: wrap;
     inline-size: 100%;
-    display: grid;
-    grid-gap: 10px;
-    grid-area: list-page-grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(8, 1fr);
-    justify-items: stretch;
-    align-items: stretch;
-
-    @include mq("medium") {
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(4, 1fr);
-    }
-
-    @include mq("large") {
-      grid-template-columns: repeat(4, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-    }
 
     &--list {
-      grid-template-columns: 1fr auto 1fr;
-      grid-template-rows: auto;
-      grid-template-areas: ". sections-list .";
+      text-align: center;
     }
 
     &--chart {
@@ -105,6 +76,14 @@
         ". section-chart ."
         ". section-content .";
     }
+
+    & > * {
+      inline-size: 20%;
+    }
+
+    & > a {
+      display: block;
+    }
   }
 
   & .site-content__footer {

assets/css/pages/_organisations-list.scss

@@ -1,6 +1,5 @@
 .organisations-table {
-  grid-column-start: 1;
-  grid-column-end: 5;
+  inline-size: 80% !important;
 
   &__items-icon {
     text-align: center;

assets/css/pages/_single-organisation.scss

@@ -109,15 +109,19 @@
   }
 }
 
-.timeline__legend > fieldset {
-  inline-size: 45%;
-  float: inline-start;
-  text-align: center;
-  border: none;
+.timeline__legend {
+  inline-size: fit-content;
+  display: flex;
+  margin-inline: auto;
 
-  & legend {
-    display: block;
-    inline-size: 100%;
+  & > fieldset {
+    text-align: center;
+    border: none;
+
+    & legend {
+      display: block;
+      inline-size: 100%;
+    }
   }
 }