.template-grid-tiles {
    & > ul {
        display: grid;
        grid-column: center-start 1 / center-end 6;
        grid-template-columns: repeat(3, minmax(0, 20ch));
        grid-auto-rows: 20ch;
        width: fit-content;

        background:
            linear-gradient(18deg in oklab, red, blue),
            linear-gradient(90deg in oklab, #5500ff, #00ff55);
        background-blend-mode: screen;
        border: 1rem solid rgb(255, 255, 255);
        border-radius: 3rem;

        & > li {
            font-size: 150%;
            font-weight: 800;
            color: white;
            border: 1rem solid rgb(255, 255, 255);

            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            align-items: center;
            justify-items: center;
            position: relative;

            & > div {
                grid-row: 1;
                grid-column: 1;
                text-align: center;
            }

            &::after {
                content: "";
                width: calc(100% + 2rem);
                height: calc(100% + 2rem);
                grid-column: 1;
                grid-row: 1;
                border: 1rem solid rgb(255, 255, 255);
                border-radius: 3rem;
                pointer-events: none;
            }
        }
    }
}