fix(feat): Adjust button and cards position when screen size change

src/styles/preview.css

@@ -46,7 +46,7 @@
   justify-content: center;
   flex-shrink: 0;
   width: 100%;
-  gap: 20px;
+  gap: 12px;
 }
 
 .app-preview__side-phone {
@@ -72,7 +72,7 @@
 }
 
 .app-preview__control-wrap {
-  display: none;
+  display: flex;
   align-items: flex-end;
   align-self: stretch;
   flex-shrink: 0;
@@ -120,7 +120,7 @@
 .app-preview__center-phone {
   position: relative;
   flex-shrink: 0;
-  width: 100%;
+  width: min(420px, calc(100vw - 144px));
   aspect-ratio: 459 / 542;
   overflow: hidden;
   pointer-events: none;
@@ -146,6 +146,10 @@
     display: flex;
   }
 
+  .app-preview__carousel {
+    gap: 20px;
+  }
+
   .app-preview__side-phone {
     display: block;
   }

src/styles/sections.css

@@ -291,12 +291,21 @@
   .experience__grid {
     grid-template-columns: repeat(2, minmax(0, 320px));
   }
+
+  .experience-card:nth-child(3):last-child {
+    grid-column: 1 / -1;
+    justify-self: center;
+  }
 }
 
 @media (min-width: 920px) {
   .experience__grid {
     grid-template-columns: repeat(3, minmax(0, 320px));
   }
+
+  .experience-card:nth-child(3):last-child {
+    grid-column: auto;
+  }
 }
 
 @media (min-width: 1023px) {