.game-list {
    width: 100%;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
    margin-top: 0;

    @media (width < 48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (width >=48rem) and (width < 64rem) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    @media (width >=64rem) and (width < 80rem) {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    @media (width >=80rem) and (width < 96rem) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    @media (width >=96rem) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

.game-list li {
    aspect-ratio: 1;
    position: relative;
    border-radius: var(--card-game-border-radius);
}

.grid-area {
    @media (width < 48rem) {
        grid-template-areas:
            "op0  op0  ..."
            "op0  op0  ..."
            "ads1 ads1 ads1"
            "...  ...  ..."
            "...  op1  op1"
            "...  op1  op1"
            "ads2 ads2 ads2"
            "...  ...  ..."
            "op2  op2  ..."
            "op2  op2  ..."
            "ads3 ads3 ads3"
            "...  ...  ..."
            "...  op3  op3"
            "...  op3  op3"
            "...  ...  ..."
        ;
        .ads1 {
            grid-area: ads1;
        }
        .ads2 {
            grid-area: ads2;
        }
        .ads3 {
            grid-area: ads3;
        }
    }

    @media (width >=48rem) and (width < 64rem) {
        grid-template-areas:
            "op0  op0  ...  ... ... ..."
            "op0  op0  op2  op2 ... ..."
            "...  ...  op2  op2 op1 op1"
            "...  op3  op3  ... op1 op1"
            "...  op3  op3  ... ... ..."
            "...  ...  ...  ... ... ..."
        ;
    }

    @media (width >=64rem) and (width < 80rem) {
        grid-template-areas:
            "op0  op0  ...  ... ... ... ..."
            "op0  op0  op2  op2 ... ... ..."
            "...  ...  op2  op2 ... op1 op1"
            "...  op3  op3  ... ... op1 op1"
            "...  op3  op3  ... ... ... ..."
            "...  ...  ...  ... ... ... ..."
        ;
    }

    @media (width >=80rem) and (width < 96rem) {
        grid-template-areas:
            "op0  op0  ...  ... ... ... ... ..."
            "op0  op0  ...  op2 op2 ... ... ..."
            "...  ...  ...  op2 op2 ... op1 op1"
            "...  op3  op3  ... ... ... op1 op1"
            "...  op3  op3  ... ... ... ... ..."
            "...  ...  ...  ... ... ... ... ..."
        ;
    }

    @media (width >=96rem) {
        grid-template-areas:
            "op0  op0  ...  ... ... ... ... ... ... ..."
            "op0  op0  ...  op2 op2 ... ... ... ... ..."
            "...  ...  ...  op2 op2 ... ... op1 op1 ..."
            "...  op3  op3  ... ... ... ... op1 op1 ..."
            "...  op3  op3  ... ... ... ... ... ... ..."
            "...  ...  ...  ... ... ... ... ... ... ..."
        ;
    }
}

.op0 {
    grid-area: op0
}

.op1 {
    grid-area: op1;
}

.op2 {
    grid-area: op2;
}

.op3 {
    grid-area: op3;
}



/* Grid for game play on pc */
.section-game-pc.is-mobile {
    border-radius: 2rem;
}

.section-game-pc {
    width: 100%;
    display: grid;
    gap: 1rem;
    grid-auto-rows: min-content;
    @media (width < 48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "igc igc igc"
            "ads1 ads1 ads1"
            "... ... ..."
            "... ... ..."
            "... ... ..."
            "ads2 ads2 ads2"
            "... ... ..."
            "... ... ..."
            "... ... ..."
            "ads3 ads3 ads3"
            "... ... ..."
        ;

        .ads1 {
            grid-area: ads1;
        }
        .ads2 {
            grid-area: ads2;
        }
        .ads3 {
            grid-area: ads3;
        }
    }

    @media (width >=48rem) and (width < 64rem) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "igc igc igc igc igc igc"
            "... ... ... ... ... ..."
        ;
    }

    @media (width >=64rem) and (width < 80rem) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-template-areas:
            "... igc igc igc igc igc igc igc igc ..."
            "... igc igc igc igc igc igc igc igc ..."
            "... igc igc igc igc igc igc igc igc ..."
            "... igc igc igc igc igc igc igc igc ..."
            "... igc igc igc igc igc igc igc igc ..."
            "... ... ... ... ... ... ... ... ... ..."
            "... ... ... ... ... ... ... ... ... ..."
            "... ... ... ... ... ... ... ... ... ..."
            "... ... ... ... ... ... ... ... ... ..."
        ;
    }

    @media (width >=80rem) and (width < 96rem) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-areas:
            "... igc igc igc igc igc igc igc igc ir0 ir0 ..."
            "... igc igc igc igc igc igc igc igc ir0 ir0 ..."
            "... igc igc igc igc igc igc igc igc ... ... ..."
            "... igc igc igc igc igc igc igc igc ir1 ir1 ..."
            "... igc igc igc igc igc igc igc igc ir1 ir1 ..."
            "... ... ... ... ... ... ... ... ... ... ... ..."
            "... ... ... ... ... ... ... ... ... ... ... ..."
            "... ... ... ... ... ... ... ... ... ... ... ..."
            "... ... ... ... ... ... ... ... ... ... ... ..."
        ;
    }

    @media (width >=96rem) {
        grid-template-columns: repeat(14, minmax(0, 1fr));
        grid-template-areas:
            "... igc igc igc igc igc igc igc igc igc igc ir0 ir0 ..."
            "... igc igc igc igc igc igc igc igc igc igc ir0 ir0 ..."
            "... igc igc igc igc igc igc igc igc igc igc ... ... ..."
            "... igc igc igc igc igc igc igc igc igc igc ... ir1 ir1"
            "... igc igc igc igc igc igc igc igc igc igc ... ir1 ir1"
            "... igc igc igc igc igc igc igc igc igc igc ... ... ..."
            "... ... ... ... ... ... ... ... ... ... ... ... ... ..."
        ;
    }
}

.similar-games-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: contents;
}

.game-play-container {
    box-shadow: var(--shadow-mid);
}

@media (width < 48rem) {
    .game-play-container {
        grid-area: igc;
        aspect-ratio: 1;
    }
    
    /* Similar games will auto-place in empty cells */
    .similar-games-list > li {
        display: block;
    }
}

@media (width >=48rem) and (width < 64rem) {
    .game-play-container {
        grid-area: igc;
        aspect-ratio: 16/9;
    }
    
    /* Similar games will auto-place in empty cells */
    .similar-games-list > li {
        display: block;
    }
}

@media (width >=64rem) and (width < 80rem) {
    .game-play-container {
        grid-area: igc;
    }
    
    /* Similar games will auto-place in empty cells */
    .similar-games-list > li {
        display: block;
    }
}

@media (width >=80rem) and (width < 96rem) {
    .similar-games-list .ir0 {
        grid-area: ir0;
    }

    .similar-games-list .ir1 {
        grid-area: ir1;
    }

    .game-play-container {
        grid-area: igc;
    }
}

@media (width >=96rem) {
    .similar-games-list .ir0 {
        grid-area: ir0;
    }

    .similar-games-list .ir1 {
        grid-area: ir1;
    }

    .game-play-container {
        grid-area: igc;
    }
}

.game-play-section .game-play {
    position: absolute !important;
    inset: 0 !important;
}

.game-play-section-ad {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
}
.game-play-section-ad .ad-320x50 {
    width: 320px;
    height: 50px;
}

.ad-label {
    text-align: center;
    font-size: 8px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}