/* === FALLBACK (ohne Container Queries) === */

.teaser-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
}

    .training-games .teaser-list {
        @media screen and (min-height:2160px) {
            gap: 4vh !important;
        }
    }

    .teaser {
        position: relative;
        aspect-ratio: 8 / 9;
        text-align: center;
        max-height: 99%;

        background-size: 96.5%;
        background-position: center 8%;
        background-repeat: no-repeat;
    }

    .training-games .teaser {
        @media screen and (max-height:1080px) {
            max-height: 380px;
        }

        @media screen and (max-height:1000px) {
            max-height: 320px;
        }

    }

    .teaser img {
        background-size: 96.5%;
        background-position: center 8%;
        background-repeat: no-repeat;
        width: auto; max-width: 100%; height: 100%; max-height: 100%;
        border-radius: 7cqw;
    }

    .teaser .teaser-content {
        position: absolute;
        inset: 0;
    }

        .teaser .teaser-content .counter {
            position: absolute;
            top: 1.2vw; right: 4.5vw; left: 15px;
            font-size: 16px;
            line-height: normal;
            padding-left: 3px;
            padding-right: 3px;
            background-color: var(--color-counter-bg);
            border-radius: .5vw;
            text-align: center;
            font-family: var(--font-base);
            white-space: nowrap;

            @media (pointer: coarse) and (hover: none) {
                /* special for touch devices */
                padding-top: 3px;
            }

            @media (min-width: 2560px) {  
                font-size: 18px;
                padding-top: 8px;
                padding-bottom: 8px;
            }

            @media (max-width: 2559px) {  
                font-size: 16px;
                padding-top: 5px;
                padding-bottom: 5px;
            }

            @media (max-width: 1440px) {  
                font-size: 14px;
                padding-top: 3px;
                padding-bottom: 3px;
            }

            @media (max-width: 500px) and (orientation: portrait) {  
                font-size: 10px;
            }
        }

        .teaser .teaser-content .counter span::before {
            content:" ";
        }

        .teaser .teaser-content .teaser-button {
            position: absolute;
            bottom:5%;
            left: 50%;
            transform: translateX(-50%);
        }

        .training-games .teaser .teaser-content .teaser-button {
            bottom:6%;
            transform: translateX(-50%);
        }

.teaser-list.items-5 {
    grid-template-columns: repeat(6, 1fr);
    gap:1rem;
}

    .teaser-list.items-5 .teaser:nth-child(1) { grid-column: span 2; }
    .teaser-list.items-5 .teaser:nth-child(2) { grid-column: span 2; }
    .teaser-list.items-5 .teaser:nth-child(3) { grid-column: span 2; }
    .teaser-list.items-5 .teaser:nth-child(4) { grid-column: 2 / span 2; }
    .teaser-list.items-5 .teaser:nth-child(5) { grid-column: 4 / span 2; }


/* === ENHANCEMENT (mit Container Queries) === */

@supports (container-type: inline-size) {
    .teaser {
        container-type: inline-size;
    }

    .teaser .teaser-content .counter {
        top: 5cqw; right: 18cqw; left: 7cqw;
        
        border-radius: 2cqw;
    }
}

/* =========================================================
   RESPONSIVE: MOBILE (max-width: 768px)
   Phones in portrait and landscape
   ========================================================= */

@media (max-width: 1200px) and (orientation: portrait) {  
    .teaser-wrapper {
        padding:0 0;
        padding-top: 2vh;
    }

    /* Override grid, flex with wrap */
    .teaser-list {
        --teaser-width:47%;

        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        max-width: none !important;
        gap:1rem;
    }

    .teaser-list div.teaser {
        flex: 0 1 var(--teaser-width);
    }

    /* Hack: prevents last child from centering
    * when justify-content: space-around is active.
    * Pseudo-element fills the space of the "missing" child */
    .teaser-list::after {
        content: "";
        flex: 0 1 var(--teaser-width);
    }

    .teaser-list div.teaser .teaser-scale-container {
        transform: translate(-50%, -50%) scale(.4);
    }

    .teaser-list div.teaser .counter {
        border-radius: 5px;
    }

    /* .training-games: two items side by side instead of three */
    .training-games .teaser-list div.teaser {
        flex: 0 1 var(--teaser-width);
    }
}

@media (max-height: 430px) and (orientation: landscape) { 
    .teaser-list {
        height: 100vh;
        gap:1rem;
        margin-top: 0;
    }
}

/* === Extra for ipad portrait === */
@media screen and (min-width: 744px)  and (max-width: 840px) and (orientation: portrait) {

    .teaser-wrapper .teaser-list {
        max-width: none !important;
    }

    .current-games .teaser-list {
        --teaser-width:44%;
    }
}