Fix sponsors styles

2 files changed, 28 insertions, 18 deletions

diff --git a/index.html b/index.html
index a413f2a..3388b4c 100644
--- a/index.html
+++ b/index.html
@@ -126,23 +126,21 @@
           </a>
         </div>
       </div>
-      <div>
+      <div style="flex: 1">
         <h4>Спонсоры</h4>
-        <div style="display: grid; grid-template-columns: repeat(2, auto)">
-          <div><a href="https://igorek.dev">Автор igorek.dev</a></div>
-          <div><a href="https://t.me/olekkorepanov">@olekkorepanov</a></div>
-          <div>
-            <a href="https://t.me/gigachad_shlepaZ">@gigachad_shlepaZ</a>
-          </div>
-          <div><a href="https://t.me/gberdyshev">@gberdyshev</a></div>
-          <div><a href="https://t.me/j_artem">@j_artem</a></div>
-          <div><a href="https://t.me/Extra_Cat_507">@Extra_Cat_507</a></div>
-          <div><a href="https://t.me/night_skumbry">@night_skumbry</a></div>
-          <div><a href="https://t.me/evgrart_st">@evgrart_st</a></div>
-          <div><a href="https://t.me/YushiNoN">@YushiNoN</a></div>
-          <div><a href="https://t.me/Pavtor09">@Pavtor09</a></div>
-          <div><a href="https://t.me/oriptal">@oriptal</a></div>
-          <div><a href="https://t.me/lissik101">@lissik101</a></div>
+        <div class="sponsors">
+          <a href="https://igorek.dev">Автор igorek.dev</a>
+          <a href="https://t.me/olekkorepanov">@olekkorepanov</a>
+          <a href="https://t.me/gigachad_shlepaZ">@gigachad_shlepaZ</a>
+          <a href="https://t.me/gberdyshev">@gberdyshev</a>
+          <a href="https://t.me/j_artem">@j_artem</a>
+          <a href="https://t.me/Extra_Cat_507">@Extra_Cat_507</a>
+          <a href="https://t.me/night_skumbry">@night_skumbry</a>
+          <a href="https://t.me/evgrart_st">@evgrart_st</a>
+          <a href="https://t.me/YushiNoN">@YushiNoN</a>
+          <a href="https://t.me/Pavtor09">@Pavtor09</a>
+          <a href="https://t.me/oriptal">@oriptal</a>
+          <a href="https://t.me/lissik101">@lissik101</a>
         </div>
       </div>
     </footer>
diff --git a/style.css b/style.css
index c129eb4..9b72345 100644
--- a/style.css
+++ b/style.css
@@ -62,18 +62,20 @@ footer {
   background-color: var(--color-surface-container);
   border-radius: 2em 2em 0 0;
 
-  display: grid;
-  grid-template-columns: 1fr 4fr;
+  display: flex;
+  flex-wrap: wrap;
 
   padding: 1.5em;
 }
 
 footer > * {
+  margin-bottom: 1em;
   margin-right: 1em;
 }
 
 footer > *:last-child {
   margin-right: 0;
+  margin-bottom: 0;
 }
 
 h1,
@@ -141,3 +143,13 @@ img {
   text-align: center;
   display: block;
 }
+
+.sponsors {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sponsors > * {
+  flex: 1 1 150px;
+  text-wrap: nowrap;
+}