*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.grid__wrapper{
    height: 100%;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(11, 1fr);
    gap: 1rem;

    div{
        background-color: magenta;
        border: 2px solid chocolate;
        border-radius: .5rem;
    }

    .box1{
        grid-row: 1/4;
    }

    .box2{
        grid-column: 2/4;
        grid-row: 1/4;
    }

    .box3{
        grid-row: 1/8;
    }

    .box4{
        grid-row: 1/6;
    }

    .box5{
        grid-column: 6/8;
        grid-row: 1/4;
    }

    .box6{
        grid-row: 4/7;
    }

    .box7{
        grid-column: 2/4;
        grid-row: 4/11;
    }

    .box8{
        grid-column: -3/-2;
        grid-row: 4/9;
    }

    .box9{
        grid-column: -2/-1;
        grid-row: 4/7;
    }

    .box10{
        grid-column: 1;
        grid-row: 7/12;
    }

    .box11{
        grid-column: 4/6;
        grid-row: 8/11;
    }

    .box12{
        grid-column: 7;
        grid-row: 7/10;
    }
}