diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 956fcf0..3932907 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -433,24 +433,30 @@ body {
   }
 
   .sponsor-wrapper {
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    grid-auto-rows: max-content;
+    display: flex;
     gap: 2rem;
-    width: 100%;
     box-sizing: border-box;
-    min-height: 1px;
 
     @media only screen and (min-width: $screen-large) {
       width: calc(100% + 4.8rem);
       margin-left: -2.4rem;
       margin-right: -2.4rem;
     }
+
+    @media only screen and (max-width: $screen-small) {
+      flex-direction: column;
+    }
+  }
+
+  .sponsor-wrapper-col {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    flex: 50%;
   }
 
   .sponsor-box {
     position: relative;
-    grid-column: span 6;
     display: block;
     padding: 3rem;
     border-radius: 2rem;
@@ -458,7 +464,7 @@ body {
     overflow: hidden;
 
     @media only screen and (max-width: $screen-small) {
-      grid-column: span 12;
+      padding: 2rem;
     }
 
     .sponsor-box--label {
@@ -490,6 +496,10 @@ body {
     .sponsor-box--value {
       margin: 0;
 
+      * {
+        margin: 2rem 0;
+      }
+
       *:first-child {
         margin-top: 0;
       }
@@ -501,20 +511,23 @@ body {
   }
 
   .sponsor-box--decoration {
-    grid-row: span 9;
+    flex-grow: 1;
     background-image: url('../images/sponsor-decoration-background-light.webp');
     background-position: top center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
 
+    @media only screen and (max-width: $screen-small) {
+      min-height: 24rem;
+    }
+
     @media (prefers-color-scheme: dark) {
       background-image: url('../images/sponsor-decoration-background-dark.webp');
     }
   }
 
   .sponsor-box--statistics {
-    grid-row: span 3;
     background: $color-action-light;
     color: white;
 
@@ -570,7 +583,6 @@ body {
   }
 
   .sponsor-box--introduction {
-    grid-row: span 8;
     background: $color-gray200;
     color: $color-gray600;
 
@@ -593,15 +605,23 @@ body {
   }
 
   .sponsor-box--collective {
-    grid-row: span 4;
-    background: transparent;
-    color: $color-gray100;
     background: rgb(229, 243, 255);
+    color: rgb(52, 73, 116);
+
+    @media (prefers-color-scheme: dark) {
+      background: rgb(25, 35, 55);
+      color: rgb(130, 158, 212);
+    }
 
     .sponsor-box--label {
       color: rgb(16, 65, 163);
       background: white;
       font-weight: 700;
+
+      @media (prefers-color-scheme: dark) {
+        background: rgb(11, 19, 35);
+        color: rgb(170, 189, 227);
+      }
     }
 
     .sponsor-box--value {
diff --git a/index.md b/index.md
index c818d39..f967d9c 100644
--- a/index.md
+++ b/index.md
@@ -77,39 +77,43 @@ pathName: rootPath
 <div class="wrapper sponsor">
   <div class="inner">
     <div class="sponsor-wrapper">
-      <div class="sponsor-box sponsor-box--introduction">
-        <div class="sponsor-box--label">
-          <span aria-hidden="true">{% include icon-heart.svg %}</span>
-          <span>Thank you</span>
-        </div>
-        <div class="sponsor-box--value">
-          <p>Critical Maps exists because <strong>people like you</strong> support it.</p>
-          <p>If you find the app useful and want it to remain available, you can help cover costs for infrastructure.</p>
+      <div class="sponsor-wrapper-col">
+        <div class="sponsor-box sponsor-box--introduction">
+          <div class="sponsor-box--label">
+            <span aria-hidden="true">{% include icon-heart.svg %}</span>
+            <span>Thank you</span>
+          </div>
+          <div class="sponsor-box--value">
+            <p>Critical Maps exists because <strong>people like you</strong> support it.</p>
+            <p>If you find the app useful and want it to remain available, you can help cover costs for infrastructure.</p>
+          </div>
         </div>
+        <div class="sponsor-box sponsor-box--statistics">
+          <div class="sponsor-box--label">
+            <span aria-hidden="true">{% include icon-infrastructure.svg %}</span>
+            <span>Infrastructure</span>
+          </div>
+          <div class="sponsor-box--value">
+            <p>Our monthly server costs range from <strong>20</strong> to <strong>60 Euro</strong>, depending on traffic.</p>
+          </div>
+          <video class="sponsor-box--background" preload="true" autoplay loop muted aria-hidden="true">
+            <source src="assets/images/sponsor-statistics-background.mp4" type="video/mp4" />
+            <source src="assets/images/sponsor-statistics-background.webm" type="video/webm" />
+          </video>
+        </div>      
       </div>
-      <div class="sponsor-box sponsor-box--statistics">
-        <div class="sponsor-box--label">
-          <span aria-hidden="true">{% include icon-infrastructure.svg %}</span>
-          <span>Infrastructure</span>
-        </div>
-        <div class="sponsor-box--value">
-          <p>Our monthly server costs range from <strong>20</strong> to <strong>60 Euro</strong>, depending on traffic.</p>
-        </div>
-        <video class="sponsor-box--background" preload="true" autoplay loop muted aria-hidden="true">
-          <source src="assets/images/sponsor-statistics-background.mp4" type="video/mp4" />
-          <source src="assets/images/sponsor-statistics-background.webm" type="video/webm" />
-        </video>
-      </div>
-      <div class="sponsor-box sponsor-box--decoration"></div>
-      <div class="sponsor-box sponsor-box--collective">
-        <div class="sponsor-box--label">
-          <span aria-hidden="true">{% include icon-opencollective.svg %}</span>
-          <span>Open Collective</span>
-        </div>
-        <div class="sponsor-box--value">
-          <p>Contributions of any size make a difference, whether one-time or ongoing. All donations and expenses are published transparently on Open Collective.</p>
-          <p><a class="button" href="https://opencollective.com/criticalmaps" target="_blank"><span class="button-title">Support now</span></a></p>
+      <div class="sponsor-wrapper-col">
+        <div class="sponsor-box sponsor-box--collective">
+          <div class="sponsor-box--label">
+            <span aria-hidden="true">{% include icon-opencollective.svg %}</span>
+            <span>Open Collective</span>
+          </div>
+          <div class="sponsor-box--value">
+            <p>Contributions of any size make a difference, whether one-time or ongoing. All donations and expenses are published transparently on Open Collective.</p>
+            <p><a class="button" href="https://opencollective.com/criticalmaps" target="_blank"><span class="button-title">Support now</span></a></p>
+          </div>
         </div>
+        <div class="sponsor-box sponsor-box--decoration"></div>
       </div>
     </div>
   </div>