diff --git a/src/styles/preview.css b/src/styles/preview.css index 9007a8e..7cf6fd5 100644 --- a/src/styles/preview.css +++ b/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; } diff --git a/src/styles/sections.css b/src/styles/sections.css index f8e0267..ab8e690 100644 --- a/src/styles/sections.css +++ b/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) {