style.css

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

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

body{
    font-family: Comfortaa;
    background: skyblue;
}

img{
    min-width: 100%;
    max-width: 100%;
}

.header{
    font-size: 3em;
    justify-self: center;
}

.line1{
    background: lightblue;
}

/* Part 1 */
.block1{
    display: grid;
    grid-template-areas:
    "T T T T   T T C C   C C C C"
    "H H H H   H H B B   B B B B";
    justify-content: center;
    justify-self: center;
    margin: 0 10% 1em 10%;
    column-gap: 5%;

    /* background-color: aqua; */
}

.text1{
    grid-area: B;
    max-width: 20em;

    /* background-color: lightblue; */
}

.image1{
    grid-area: C;
    min-width: 5em;
    max-width: 10em;
    justify-self: center;

    /* background-color: lightblue; */
}

/* Part 2 */
/* .block2{
    display: grid;
    grid-template-areas:
    "A A A A   A A A A   A A A A"
    "C C C C   C C C C   C C C C"
    "B B B B   B B B B   B B B B";
    justify-content: center;
    justify-self: left;
    margin: 0 10% 1em 10%;
} */

.text2{
    grid-area: H;
    max-width: 20em;
    justify-self: left;

    /* background-color: lightblue; */
}

.image2{
    grid-area: T;
    min-width: 5em;
    max-width: 10em;
    justify-self: center;

    /* background-color: lightblue; */
}