* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}
body {
    font-family: "Barlow Semi Condensed", sans-serif;
    background-color: #EDF2F8;
    font-weight: 500;
    min-height: 100vh;
    display: grid;
    place-content: center; 
}
@media only screen and (min-width: 66em) {
    .layout {
        max-width: 120%;
        display: grid;
        place-content: center;
        gap: 2.5rem;
        margin: 3rem;
        grid-template-columns: repeat(4, 1fr);
    } 
    .element:nth-child(1) {
        grid-column: 1 / 3;
    }
    .element:nth-child(4) {
        grid-column: 2/4;
    }
    .element:nth-child(5) {
        grid-column-start: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }
}

@media only screen and (max-width: 66em) and (min-width: 51em) {
    .layout {
        max-width: 110%;
        display: grid;
        place-content: center;
        gap: 2rem;
        margin: 3rem;
        grid-template-columns: repeat(3, 1fr);
    } 
    .element:nth-child(1) {
        grid-column: 1 / 3;
    }
    .element:nth-child(4) {
        grid-column: 1/4;
    }
    .element:nth-child(5) {
        grid-column-start: 3;
        grid-row-start: 1;
        grid-row-end: 3;
    } 
}
@media only screen and (max-width: 50.9em) and (min-width: 40em) {
    .layout {
        max-width: 110%;
        display: grid;
        place-content: center;
        gap: 2rem;
        margin: 3rem;
        grid-template-columns: repeat(2, 1fr);
    } 
    .element:nth-child(1) {
        grid-column: span 2;
    }
    .element:nth-child(4) {
        grid-column: 2;
    }
    .element:nth-child(5) {
      grid-row-end: 4;
    }  
}