.dropdown-games .game,.dropdown-games .progress-bar{transition:background-color .2s cubic-bezier(.17, .17, .23, 1)}.new-games{width:min(1050px,calc(100vw - 48px));border-radius:25px;margin:17px auto;padding:30px;background-color:#18181c;overflow-anchor:none}.new-games .games-content{display:flex;gap:18px;align-items:stretch}.new-games .headline-game{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;display:flex;align-items:end;position:relative}.frame{flex:1 1 0;width:auto;min-width:0;height:380px;overflow:hidden}.new-games .headline-game a{color:#000;border-radius:10px;background:#fff;padding:.75em 1.25em;margin:0 0 25px 30px;font-size:1.1em;text-decoration:none;font-family:Inter,"sans-serif"}.new-games .dropdown-games{width:320px;flex:0 0 320px;height:380px}.dropdown-games{display:flex;flex-direction:column;align-items:center;justify-content:space-between}.dropdown-games .game{width:100%;max-width:280px;height:100px;display:flex;align-items:center;justify-content:space-evenly;cursor:pointer;border-radius:23px;position:relative;overflow:hidden}.dropdown-games .progress-bar{position:absolute;height:100%;left:0;right:280px;z-index:1;background-color:#454545}.dropdown-games .game img{width:auto;height:60px;border-radius:8px;z-index:2;transition:.2s cubic-bezier(.17, .17, .23, 1)}.dropdown-games .game p{display:flex;width:135px;height:100%;flex-direction:column;justify-content:center;color:#fff;font-family:Inter,"sans-serif";font-size:1em;z-index:2}.dropdown-games .game:hover{background-color:#252525}.game-multijoueur-image{position:absolute;right:10px;bottom:10px}

@media (max-width: 1024px) {
    .new-games {
        padding: 22px 18px 24px;
        border-radius: 20px;
    }

    .new-games .games-content {
        flex-direction: column;
        gap: 18px;
    }

    .frame,
    .new-games .dropdown-games {
        width: 100%;
    }

    .frame {
        flex: none;
        width: 100%;
        height: clamp(160px, 32vw, 280px);
        aspect-ratio: auto;
        border-radius: 16px;
    }

    .new-games .headline-game {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: inherit;
    }

    .new-games .dropdown-games {
        flex: none;
        height: auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 14px 0 18px;
        margin: 0 -18px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .new-games .dropdown-games::-webkit-scrollbar {
        display: none;
    }

    .new-games .dropdown-games::before,
    .new-games .dropdown-games::after {
        content: "";
        flex: 0 0 calc(50% - 134px);
        min-width: 14px;
    }

    .dropdown-games .game {
        min-width: 248px;
        width: 248px;
        flex: 0 0 248px;
        height: 84px;
        max-width: none;
        border-radius: 16px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        background: rgba(55, 57, 82, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.06);
        opacity: 0.65;
        transform: scale(0.95);
        transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
        gap: 10px;
        padding: 0 12px;
        justify-content: flex-start;
    }

    .dropdown-games .game.is-active {
        opacity: 1;
        transform: scale(1);
        background: linear-gradient(135deg, rgba(73, 76, 110, 0.95), rgba(37, 37, 37, 0.95)) !important;
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    .dropdown-games .game img {
        height: 56px;
        width: 56px;
        flex: 0 0 56px;
        border-radius: 10px;
        object-fit: cover;
    }

    .dropdown-games .game p {
        width: auto;
        flex: 1;
        min-width: 0;
        font-size: .95rem;
        line-height: 1.2;
        height: auto;
        padding: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .dropdown-games .progress-bar {
        display: none;
    }
}

@media (max-width: 640px) {
    .new-games {
        width: calc(100vw - 16px);
        padding: 16px 14px 18px;
        border-radius: 18px;
    }

    .frame {
        aspect-ratio: 1.5 / 1;
    }

    .new-games .headline-game a {
        margin: 0 0 16px 16px;
        padding: .65rem 1rem;
        font-size: 1rem;
    }

    .new-games .dropdown-games {
        margin: 0 -14px;
        gap: 8px;
    }

    .new-games .dropdown-games::before,
    .new-games .dropdown-games::after {
        flex-basis: calc(50% - 112px);
    }

    .dropdown-games .game {
        min-width: 208px;
        width: 208px;
        flex: 0 0 208px;
        height: 76px;
        border-radius: 14px;
        padding: 0 10px;
    }

    .dropdown-games .game img {
        height: 48px;
        width: 48px;
        flex: 0 0 48px;
    }

    .dropdown-games .game p {
        font-size: .9rem;
    }
}

@media (max-width: 520px) {
    .frame {
        aspect-ratio: 1.2 / 1;
    }

    .new-games .dropdown-games::before,
    .new-games .dropdown-games::after {
        flex-basis: calc(50% - 100px);
    }

    .dropdown-games .game {
        min-width: 184px;
        width: 184px;
        flex: 0 0 184px;
        height: 72px;
        border-radius: 12px;
    }

    .dropdown-games .game img {
        height: 44px;
        width: 44px;
        flex: 0 0 44px;
    }

    .dropdown-games .game p {
        font-size: .85rem;
    }
}
