:root {
    --blendMode: normal;
}

html,
body {
    font-family: sans-serif;
}

ul {
    --image: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-width: 768px;
    li {
        background-color: teal;
        background-image: var(--image);
        aspect-ratio: 1 / 1;
        &#tile-1 {
            background-position: left top;
        }
        &#tile-2 {
            background-position: calc(768px / -4) top;
        }
        &#tile-3 {
            background-position: calc((768px / -4) * 2) top;
        }
        &#tile-4 {
            background-position: calc((768px / -4) * 3) top;
        }
        
        
        &#tile-5 {
            background-position: left calc(768px / -4);
        }
        &#tile-6 {
            background-position: calc(768px / -4) calc(768px / -4);
        }
        &#tile-7 {
            background-position: calc((768px / -4) * 2) calc(768px / -4);
        }
        &#tile-8 {
            background-position: calc((768px / -4) * 3) calc(768px / -4);
        }
        
        &#tile-9 {
            background-position: left calc((768px / -4) * 2);
        }
        &#tile-10 {
            background-position: calc(768px / -4) calc((768px / -4) * 2);
        }
        &#tile-11 {
            background-position: calc((768px / -4) * 2) calc((768px / -4) * 2);
        }
        &#tile-12 {
            background-position: calc((768px / -4) * 3) calc((768px / -4) * 2);
        }
        
        &#tile-13 {
            background-position: left calc((768px / -4) * 3);
        }
        &#tile-14 {
            background-position: calc(768px / -4) calc((768px / -4) * 3);
        }
        &#tile-15 {
            background-position: calc((768px / -4) * 2) calc((768px / -4) * 3);
        }
        &#tile-16 {
            background-position: calc((768px / -4) * 3) calc((768px / -4) * 3);
        }
    }
}

button {
    font-size: 2rem;
    margin-block-end: 24px;
    padding: 8px 16px;
}