.games-grid {
            display: grid;
            gap: .5rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
            will-change: auto
        }

        @media(min-width:575px) {
            .games-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr))
            }
        }

        @media(min-width:768px) {
            .games-grid {
                gap: 1rem;
                grid-template-columns: repeat(4, minmax(0, 1fr))
            }
        }

        @media(min-width:1280px) {
            .games-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr))
            }
        }

        .games-grid {
            max-width: 100%;
            overflow: hidden;
            position: relative;
            z-index: 0
        }

        .games-grid:before {
            bottom: 100vh;
            content: var(--tw-content);
            left: 0;
            pointer-events: none;
            position: absolute;
            right: -.5rem;
            top: 0;
            z-index: -10
        }

        @media(min-width:768px) {
            .games-grid:before {
                content: var(--tw-content);
                right: -1rem
            }
        }

        .games-grid:before {
            --size: 50%;
            --url: url(data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAIANCWkAANwAP77/VAA);
            background: var(--url) top left/var(--size)
        }

        @media(min-width:575px) {
            .games-grid:before {
                --size: 33.33333%
            }
        }

        @media(min-width:768px) {
            .games-grid:before {
                --size: 25%;
                --url: url(data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAIANCWkAANwAP77/VAA)
            }
        }

        @media(min-width:1280px) {
            .games-grid:before {
                --size: 16.6664%
            }
        }