тестирую

css/style.css

@@ -17,7 +17,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 100vh;
+    /* min-height: 140vh; */
     flex-direction: column;
     color: #333333;
     margin: 0;
@@ -67,14 +67,18 @@ div.bio {
     text-align: justify;
 }
 
+div.icons {
+    min-height: 400px;
+}
+
 div.social {
     display: grid;
-    grid-template-columns: repeat(5, 1fr); /* 5 столбцов для десктопа */
-    gap: 20px;
+    grid-template-columns: repeat(6, 1fr); /* 5 столбцов для десктопа */
+    gap: 60px;
     justify-items: center;
     margin-top: 50px;
     width: 100%;
-    max-width: 960px;
+    max-width: 600px;
 }
 
 .social div {
@@ -121,7 +125,7 @@ div.social {
     padding: 5px 0;
     position: absolute;
     z-index: 1;
-    top: 110%;
+    top: 100%;
     opacity: 0;
     transition: opacity 1s;
     font-family: Whypo-rrey;
@@ -136,6 +140,7 @@ div.social {
 @media screen and (max-width: 768px) {
     body {
         padding: 10px;
+        /* min-height: 170vh; */
     }
 
     div.row {
@@ -163,9 +168,13 @@ div.social {
         font-size: 18px;
     }
 
+    div.icons {
+        min-height: 150%;
+    }
+
     div.social {
         grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */
-        gap: 10px;
+        gap: 60px;
         margin-top: 30px;
     }
 

index.html

@@ -24,6 +24,7 @@
                 </div>
             </div>
         </div>
+        <div class="icons">
             <div class="row social">
                 <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
                 <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
@@ -40,5 +41,6 @@
                 <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
                 <div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
             </div>
+        </div>
     </body>
 </html>