@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html, body{
    height: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    padding: 0;
    margin: 0;
    cursor: grab;
    user-select: none;
}

.grid{
    position: fixed;
    top: 0; left: 0;
    width: 180%;
    height: 150%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    > div{
        position: relative;
    }
}

@media (min-width: 768px) {
    .grid{
        width: 160%;
        height: 220%;
        grid-template-columns: repeat(5, 2fr);
    }
}

canvas{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

figure{
    position: absolute;
    inset: 0.5rem;
    padding: 0;
    margin: 0;
}