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

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #444;
}

.grid__wrapper{
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: grid;
    grid-template-columns: 3fr 3fr 2fr 3fr 3fr;
    grid-template-rows: 4fr 3fr 2fr 4fr;
    gap: 2rem;

    grid-template-areas: 
        'red1 blue1 blue1 gold1 gold1'
        'red1 gold2 white2 white2 red2'
        'white1 gold2 white2 white2 red2'
        'white1 red3 red3 blue2 red2'
    ;

    .red-1{
        grid-area: red1;
        background-color: orangered;
    }
    .red-2{
        grid-area: red2;
        background-color: orangered;
    }
    .red-3{
        grid-area: red3;
        background-color: orangered;
    }

    .blue-1{
        grid-area: blue1;
        background-color: aqua;
    }
    .blue-2{
        grid-area: blue2;
        background-color: aqua;
    }

    .gold-1{
        grid-area: gold1;
        background-color: gold;
    }
    .gold-2{
        grid-area: gold2;
        background-color: gold;
    }

    .white-1{
        grid-area: white1;
        background-color: white;
    }
    .white-2{
        grid-area: white2;
        background-color: white;
    }
}