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

:root {
    --sunglow: #FFC857;
    --murrey: #89023E;
    --green-yellow: #CCFF66;
    --bittersweet: #ff6666;
    --light-sea-green: #2ec4b6;
    --violet-blue: #3B429F;
    --lavender: #AA7DCE;
    --bg: #ececec;
}

html {
    height: 100%;
}

body {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    height: 100%;
    display: grid;
    align-items: center;
    background: var(--bg);
}

.grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    height: 1080px;
}

.grid-1 {
    background: var(--light-sea-green);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid-2 div:nth-child(1) {
    background: var(--bittersweet);
    grid-column: 1 / 1;
}

.grid-2 div:nth-child(2) {
    background: var(--sunglow);
    grid-column: 2 / 2;
}

.grid-2 div:nth-child(3) {
    background: var(--green-yellow);
    grid-column: 1 / 3;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-3 div:nth-child(1) {
    background: var(--violet-blue);
    grid-row: 1 / 3;
}

.grid-3 div:nth-child(2) {
    background: var(--sunglow);
    grid-row: 1 / 2;
}

.grid-3 div:nth-child(3) {
    background: var(--green-yellow);
    grid-row: 2 / 3;
}

.grid-4 {
    background: var(--lavender);
}

@media (max-width: 768px) {
   .grid {
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
   }
}

@media (max-width: 462px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-2 div:nth-child(1) {
        grid-column: 1 / 1;
        grid-row: 1 / 3;
    }
    
    .grid-2 div:nth-child(2) {
        grid-column: 2 / 2;
    }
    
    .grid-2 div:nth-child(3) {
        grid-column: 2 / 3;
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3 div:nth-child(1) {
        grid-row: 1 / 1;
    }

    .grid-3 div:nth-child(2) {
        grid-row: 1 / 2;
    }

    .grid-3 div:nth-child(3) {
        grid-column: 1 / 3;
    }
}