diff --git a/src/views/Play.svelte b/src/views/Play.svelte index 80d3bfc..0a299b7 100644 --- a/src/views/Play.svelte +++ b/src/views/Play.svelte @@ -336,8 +336,8 @@ } .play-curves svg { - width: 100%; - height: 100%; + height: 100vh; + width: auto; } /* --- Animations partagées featured + preview --- */ @@ -453,10 +453,11 @@ opacity: 1; } - .play-carousel-item button :global(img), - .play-carousel-item button :global(picture img) { + .play-carousel-item.active button :global(picture img) { object-fit: cover; transition: all 0.4s var(--ease-standard); + border: 4px solid var(--color-primary); + border-radius: 25%; } .play-carousel-title { @@ -465,11 +466,6 @@ text-align: center; } - .play-carousel-item.active button :global(picture img) { - border: 4px solid var(--color-primary); - border-radius: 25%; - } - /* --- Mobile (≤ 700px) --- */ @media (max-width: 700px) { .game-preview { @@ -491,14 +487,15 @@ } .play-carousel { - grid-area: 14/4 / span 3 / span 13; + grid-area: 15/4 / span 3 / span 13; } .play-carousel-item :global(img) { - width: clamp(70px, 18.41vw, 355px); + width: clamp(80px, 18.41vw, 355px); } - .play-carousel-item.active :global(img) { - width: clamp(90px, 18.41vw, 355px); + .play-carousel-item.active button :global(picture img) { + border: 2px solid var(--color-primary); + width: clamp(97px, 18.41vw, 355px); } }