From baab2fb3a185748e0bcff713054202f27b550ac6 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 25 Mar 2026 12:46:38 +0100
Subject: [PATCH] play page : hide preview on tablet. closes #29

---
 src/views/Play.svelte | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/Play.svelte b/src/views/Play.svelte
index 936f443..0dbb338 100644
--- a/src/views/Play.svelte
+++ b/src/views/Play.svelte
@@ -366,18 +366,18 @@
 
   /* --- Section principale --- */
   .play-featured {
-    grid-area: 2/4 / span 12 / span 10;
+    grid-area: 1/4 / span 12 / span 10;
     z-index: var(--z-content);
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 1.5rem;
   }
 
   .play-lettering {
     width: clamp(180px, 18.77vw, 362px);
     object-fit: contain;
     object-position: left center;
+    margin-bottom: 1rem;
   }
 
   .play-description {
@@ -417,7 +417,9 @@
 
   /* --- Carrousel --- */
   .play-carousel {
-    grid-area: 16/4 / span 3 / span 14;
+    position: absolute;
+    left: 6vw;
+    bottom: 4rem;
     z-index: var(--z-content);
   }
 
@@ -436,7 +438,6 @@
     gap: 0.5rem;
     background: none;
     cursor: pointer;
-    opacity: 0.5;
     transition: all 0.4s var(--ease-standard);
   }
 
@@ -448,10 +449,6 @@
     width: clamp(170px, 18.41vw, 355px);
   }
 
-  .play-carousel-item.active button {
-    opacity: 1;
-  }
-
   .play-carousel-item.active button :global(picture img) {
     object-fit: cover;
     transition: all 0.4s var(--ease-standard);
@@ -459,11 +456,14 @@
     border-radius: 25%;
   }
 
-  /* --- Mobile (≤ 700px) --- */
-  @media (max-width: 700px) {
+  @media screen and (max-width: 1140px) {
     .game-preview {
       display: none;
     }
+  }
+
+  /* --- Mobile (≤ 700px) --- */
+  @media (max-width: 700px) {
 
     .play-featured {
       grid-area: 6/4/span 12/span 18;