@property --floor-rows {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

:root {
    --grid-gap: 0.4rem;
    --grid-division: 3; /*Integer*/
    --tile-base-size: 9.5rem;
    --tile-sub-size: calc(
        (var(--tile-base-size) - (
            (var(--grid-division) - 1) 
            * var(--grid-gap)
        ))/var(--grid-division)
    );
    --grid-skip: 0;
    --classic-count: 34;
}

.random {
    grid-column-start: calc(-1 - var(--grid-division));
    grid-column-end: -1;
    grid-row-start: calc(1 + var(--grid-skip));
    grid-row-end: calc(1 + var(--grid-division) + var(--grid-skip));
    position: absolute;
    right: 0;
    top:0;
}

#head-games-container {
    position: relative;
}

.filler {
    grid-column-start: calc(-2 - var(--grid-division));
    grid-column-end: -1;
    grid-row-start: calc(1 + var(--grid-skip));
    grid-row-end: calc(1 + 2 * var(--grid-division) + var(--grid-skip));
}

.home-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(var(--tile-sub-size)));
    gap: var(--grid-gap);
    max-width: 100%;
    width: fit-content;
    overflow: hidden;
    --max-height-home-tiles: calc(
        var(--section-rows) * var(--tile-base-size) + (var(--section-rows) - 1 + var(--grid-skip)) * var(--grid-gap)
    );
    max-height: var(--max-height-home-tiles);
    margin-bottom: 3rem;
}

.thumb {
    width: var(--tile-base-size);
    height: auto;
    aspect-ratio: 1;
    grid-column: span var(--grid-division);
    grid-row: span var(--grid-division);
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
}

.section-header {
    display: flex;
    justify-content: space-between;
    grid-column-start: 1;
    grid-column-end: -1;
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.section-header > * {
    text-align: center;
}

.section-header > *:nth-child(1) {
    text-align: left;
}

.section-header > *:nth-last-child(1) {
    text-align: right;
}

.container {
    container-name: main;
    container-type: inline-size;
}

#classic-games {
    --game-count: 34;
}

#defense-games {
    --game-count: 11;
}

#strategy-games {
    --game-count: 14;
}

#escape-games {
    --game-count: 8;
}

#castle-games {
    --game-count: 9;
}

#endless-games {
    --game-count: 15;
}

.home-tiles {
    --game-count: 18; /* Default */
    --filler: 0; /* Default */
    --floor-rows: calc((var(--game-count) + 2*var(--filler))/var(--columns) - 0.5);
    --section-rows: var(--floor-rows);
}

/* [9.5rem = tile-base-size] [2.9rem = tile-sub-size (for div 3)] [4px = grid-gap] */
@container main (width >= calc(6*(95px + 4px) + 29px)) {
    /* Head section only */
    .home-tiles {
        --columns: 6;
    }

    .filler-games {
        --filler: 1;
    }
}

@container main (width >= calc(6*95px + 5*4px)) {
    /* All */
    .home-tiles {
        --columns: 6;
    }
}

@container main (width < calc(6*(95px + 4px) + 29px)) {
    .home-tiles {
        --columns: 6;
    }

    .filler-games {
        --filler: 2;
    }
}

@container main (width < calc(6*95px + 5*4px)) {
    .home-tiles {
        --columns: 5;
    }

    .filler-games {
        --filler: 1;
    }
}

@container main (width < calc(5*(95px + 4px) + 29px)) {
    .home-tiles {
        --columns: 5;
    }

    .filler-games {
        --filler: 2;
    }
}

@container main (width < calc(5*95px + 4*4px)) {
    .home-tiles {
        --columns: 4;
    }

    .filler-games {
        --filler: 1;
    }
}

@container main (width < calc(4*(95px + 4px) + 29px)) {
    .home-tiles {
        --columns: 4;
    }

    .filler-games {
        --filler: 2;
    }
}

@container main (width < calc(4*95px + 3*4px)) {
    .home-tiles {
        --columns: 3;
    }

    .filler-games {
        --filler: 1;
    }
}

@container main (width < calc(3*(95px + 4px) + 29px)) {
    .home-tiles {
        --columns: 3;
    }

    .filler-games {
        --filler: 2;
    }
}


@container main (width < calc(3*95px + 2*4px)) {
    .home-tiles {
        --columns: 2;
    }

    .filler-games {
        --filler: 1;
    }
}


@container main (width < calc(2*(95px + 4px) + 29px)) {
    .home-tiles {
        --columns: 2;
    }

    .filler-games {
        --filler: 0;
    }

    .random,
    #random-header,
    .filler {
        display: none;
    }

    .home-tiles {
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr;
    }

    .section-header {
        justify-content: center;
    }

    .section-header > *{
        text-align: center !important;
    }
}

@container main (width <= calc(2*95px + 1*4px)) {
    .home-tiles {
        --columns: 1;
    }

    .filler-games {
        --filler: 0;
    }
}

@media (width < 650px) {
    .section-3 .side {
        display: none;
    }
}