body {
    background-color: #f1f0f3;
    margin: auto;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    color: #121212;
}

.grid {
    max-width: 65em;
    width: 100%;
    min-height: 52em;
    height: auto;
    margin: auto;
    display: grid;
    gap: 0.2em;
    grid-template-columns: repeat (4, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "block-seven block-one block-one block-four"
    "block-seven block-one block-one block-four"
    "block-seven block-one block-one block-four"
    "block-seven block-one block-one block-four"
    "block-seven block-two block-three block-four"
    "block-eight block-two block-three block-four"
    "block-eight block-two block-three block-four"
    "block-eight block-six block-five block-five"
    "block-eight block-six block-five block-five" 
    "block-eight block-six block-five block-five";
    padding: 0.5em;
}

.block-one {
    grid-area: block-one;
    display: flex;
    flex-direction: column;
    background-color: #7650dc;
    height: 90%;
    width: 98%;
    color: #ffffff;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 0 0 1em 0;
    position: relative;
    left: 1.5em;
    top: 2em;
}

.block-one p:first-of-type {
    font-size: 3.9rem;
    font-weight: 400;
    margin: 0 0.2em;
    line-height: 1;
    padding: 0.5em 0 0 0;
}

.block-one span {
    color: #ffcb6b;
}

.block-one img {
    width: 11em;
    margin-top: 1.5em;
}

.block-two {
    grid-area: block-two;
    background-color: #ffffff;
    height: 74%;
    width: 88%;
    position: relative;
    top: 2em;
    left: 1em;
    overflow: hidden;
    padding: 0.7em 0 0 1em;
}
.block-two img {
    width: 17em;
}

.block-two p {
    font-size: 1.8rem;
    padding: 0.3em 0.5em 0 0.5em;
    margin: 0;
    line-height: 1;
}

.block-three {
    grid-area: block-three;
    display: flex;
    flex-direction: column;
    background-color: #ffcb6b;
    height: 76%;
    width: 95%;
    padding: 0;
    align-items: center;
    overflow: hidden;
    position: relative;
    top: 2.2em;
    left: 1.6em;
}

.block-three p {
    font-size: 1.9em;
    line-height: 1;
    margin: 1em 1em 0.5em 1em;
}

.block-three img {
    width: 11em;
    padding: 0;
    margin: 0;
}

.block-four {
    grid-area: block-four;
    background-color: #dacffc;
    width: 72%;
    height: 88%;
    padding-left: 2em;
    padding-top: 1em;
    overflow: hidden;
    position: relative;
    left: 2em;
    top: 1.5em;
}

.block-four p:first-of-type {
    font-size: 1.9em;
    line-height: 1;
    padding-right: 0.5em;
}

.block-four img {
    width: 20.5em;
    margin-top: -0.5em;
}

.block-four p:last-of-type {
    padding-right: 2em;
    font-size: 1.1em;
    line-height: 1;
}

.block-five {
    grid-area: block-five;
    background-color: #7650dc;
    height: 91%;
    width: 88%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left: 2em;
    position: relative;
    left: 1.2em;
    bottom: 0.5em;
}

.block-five img {
    width: 12em;
    height: 10em;
}

.block-five p {
    color: #ffffff;
    font-size: 2em;
    line-height: 1;
    padding-left: 0.5em;
    
}

.block-six {
    grid-area: block-six;
    background-color: #ffffff;
    height: 94%;
    width: 93%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    position: relative;
    bottom: 0.7em;
    left: 1.1em;
}

.block-six p span {
    font-size: 4.1em;
    font-weight: 500;
}

.block-six img {
    width: 10em;
    padding: 1em 0;
}

.block-seven {
    grid-area: block-seven;
    background-color: #f9eee1;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: -2.5em;
    left: 1.5em;
}   

.block-seven p {
    padding: 0 1em;
    font-size: 2.2em;
    line-height: 1;
}

.block-seven em {
    color: #7650dc;
}

.block-seven img {
    width: 13em;
}

.block-eight {
    grid-area: block-eight;
    background-color: #ffcb6b;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: -1.2em;
    left: 1.5em;
}

.block-eight p {
    padding: 0 0.9em;
    margin-top: 1.5em;
    font-size: 2.2em;
    line-height: 1;
}

.block-eight img {
    width: 11em;
    padding-bottom: 0.5em;
}

article {
    border-radius: 0.6em;
}


@media screen and (max-width: 768px) {
    body {
        margin: 4em 2em;
    }

    .grid {
        display: grid;
        gap: 2em;
        grid-template-columns: repeat (2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "block-one block-one"
        "block-two block-three"
        "block-four block-four"
        "block-five block-five"
        "block-six block-seven"
        "block-eight block-eight"
        ;
        place-items: center;
        padding: 2em;
    }

    .block-one,.block-two, .block-three, .block-four, .block-five, .block-six, .block-seven, .block-eight {
        position: unset;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    
    .block-four {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .block-four p {
        font-size: 2em;
        padding-left: 2em;
    }

    .block-four img {
        width: 8em;
        height:7em;
        margin-left: 2em;
    }

    .block-five p {
        text-align: center;
        font-size: 2.5em;
        padding: 0 1em;

    }

    .block-five img {
        width: 10em;
        height:9em;
        margin-left: 2em;
        padding: 0.5em;
    }

    .block-eight {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .block-eight p {
        font-size: 2.5em;
        padding: 0 0.5em 0.5em;
    }

    .block-eight img {
        width: 9em;
        padding: 0.5em 0;
    }

}

@media screen and (max-width: 425px) {
    body {
        margin: 0;
        padding: 0;
    }

    .grid {
        display: flex;
        flex-direction: column;
    }

    .block-one p:first-of-type {
        font-size: 3.5em;
        padding: 0.5em 0.5em 0 0.5em;
    }

    .block-two img {
      width: 100%;
    }

    .block-two p {
        margin: 0 0.5em 0.5em 0.5em;
        font-size: 1.9em;
    }

    .block-three {
        align-items: start;
    }

    .block-three img {
        margin-left: 2em;
    }

    .block-four {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 0;
        
    }

    .block-four p:first-of-type {
        padding: 0;
        margin-left: 0.5em;
    }

    .block-four img {
        margin: 0;
        width: 20em;
        height: auto;
    }

    .block-four p:last-of-type {
        padding: 0.5em 2em;
        font-size: 1.3em;

    }

    .block-five {
        flex-direction: column;
    }

    .block-five img {
        margin-top: 1em;
        width: 14.5em;
        height: auto;
    }

    .block-five p {
        margin: 0.5em 0;
        font-size: 2.3em;
    }

    .block-six {
        align-items: start;
    }

    .block-six p {
        padding-left: 1em;
        font-size: 1.3rem;
    }

    .block-six p span {
        font-size: 3.2rem;
    }
    
    .block-six img {
        padding: 0 1.5em 1.5em 1.5em;
    }

    .block-seven {
        align-items: unset;
    }

    .block-seven img {
        margin: 0 0 5em 2em;
    }

    .block-eight {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .block-eight p {
        margin: 0.5em 0 0 0.5em;
        font-size: 2.2em;
    }

    .block-eight img {
        padding: 0;
        margin: 0 0 1.5em 1.5em;
        width: 15em;
        height: auto;
    }

    @media screen and (max-width: 375px) {
        .block-one p:first-of-type {
            font-size:3rem;
        }

        .block-two {
            font-size: 0.75rem;
            padding: 0.3em;
        }

        .block-three {
            font-size: 0.8rem;
        }

        .block-three img {
            width: 15em;
        }

        .block-four {
            font-size: 0.8rem;
        }

        .block-four img {
            width: 24em;
    }
    }
}