diff --git a/.github/workflows/localgov_microsites.yml b/.github/workflows/localgov_microsites.yml
index 520d442..8608d99 100644
--- a/.github/workflows/localgov_microsites.yml
+++ b/.github/workflows/localgov_microsites.yml
@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - '2.x'
+      - '3.x'
   pull_request:
     branches:
       - '2.x'
+      - '3.x'
   workflow_dispatch:
 
 jobs:
diff --git a/README.md b/README.md
index c067176..2e07182 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,32 @@
 
 A  sub-theme of LocalGov Base. Please read the README there also.
 
+## Supported releases
+
+We now have a 3.x and a 2.x branch.
+
+- All new feature development work will be against the 3.x branch
+- The 2.x branch will continue to have bug fixes until the end of December 2025.
+
+Everyone is encouraged to upgrade to the 3.x branch and localgov_base 2.x, but please see release notes regarding changes to the grid system layouts, moving from flex to css grids.
+
+https://github.com/localgovdrupal/localgov_base/releases/tag/2.0.0
+
+## Notes on upgrading from 2.x to 3.x
+
+The 3.x branch of localgov_microsites_base requires localgov_base 2.x
+
+In the 2.x branch of localgov_base, we have re-written our grid system to use CSS Grid instead of Flexbox.
+
+This makes the CSS for the grid simpler. It should also fix lots of minor spacing issues (negative left/right margin on grid containers).
+
+Important: We recommend testing your layouts before deploying.
+
+In some cases, if you have made customisations to the layout in a child theme, removing these changes might be advisable.
+
+In some cases, the changes needed in child themes are to change the width specification on grid child items from
+"width: calc(...) " to "grid-column: span 3" for example.
+
 ## Customising the appearance through the UI
 
 A _Microsite Admin_ has the permission to set a number of css variables through the UI. These override the default variables set in /css/variables.css
diff --git a/composer.json b/composer.json
index adc713e..800dc1e 100644
--- a/composer.json
+++ b/composer.json
@@ -6,7 +6,7 @@
     "license": "GPL-2.0-or-later",
     "require": {
         "drupal/twig_tweak": "^3.2",
-        "localgovdrupal/localgov_base": "^1.7.0",
+        "localgovdrupal/localgov_base": "^2.0.0",
         "localgovdrupal/localgov_microsites_group": "^4.0.0-alpha3"
     }
 }
diff --git a/css/components/footer.css b/css/components/footer.css
index d76efbf..132c445 100644
--- a/css/components/footer.css
+++ b/css/components/footer.css
@@ -53,18 +53,20 @@
   color: var(--footer-text-color);
 }
 
-@media screen and (min-width: 768px) {
-  .microsite-footer .lgd-row__one-quarter,
-  .microsite-footer .lgd-row--quarters > * {
-    width: calc(25% - var(--footer-grid-column-spacing));
-  }
+.region-microsites-footer .lgd-region__inner > .lgd-row:first-of-type {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--footer-grid-column-justification);
 }
 
-.microsite-footer .lgd-row > * {
-  margin-right: calc(var(--footer-grid-column-spacing) / 2);
-  margin-left: calc(var(--footer-grid-column-spacing) / 2);
+@media (min-width: 48rem) {
+  .region-microsites-footer .lgd-region__inner > .lgd-row:first-of-type > * {
+    flex: 0 0 calc(50% - var(--grid-column-spacing));
+  }
 }
+@media (min-width: 60rem) {
+  .region-microsites-footer .lgd-region__inner > .lgd-row:first-of-type > * {
+    flex: 0 0 calc(25% - var(--grid-column-spacing));
 
-.region-microsites-footer .lgd-region__inner > .lgd-row:first-of-type {
-  justify-content: var(--footer-grid-column-justification);
+  }
 }
diff --git a/js/header.js b/js/header.js
index 6edff3e..282311c 100644
--- a/js/header.js
+++ b/js/header.js
@@ -63,7 +63,8 @@
             if (
               offCanvasToggle &&
               !offCanvasToggle.contains(e.target) &&
-              !offCanvas.contains(e.target)
+              !offCanvas.contains(e.target) &&
+              offCanvas.getAttribute("data-expanded") === "true"
             ) {
               handleCloseOffCanvas();
             }