html {
    font-size: 14px;
}

body {
    margin : 0;
    padding : 2rem;
    display: grid;
    font-family: 'Poppins', sans-serif;
    grid-template-rows : 5vh 45vh 45vh;
    row-gap : 2vh;
}

article {
    display : grid;
    grid-template-rows: 5vh 40vh;
    grid-template-columns : 45vw 45vw;
}

article > section:first-of-type {
    grid-column : 1 / 2;
}

article > section:last-of-type {
    grid-column: 2 / 3;
}

#example-1 {
    display: grid;
    grid-template-rows: 50% 50%;
}

#example-1 > section:first-of-type {
    background-color : orange;
}

#example-1 > section:last-of-type {
    background-color : teal;
}

#example-2 {
    display: grid;
    grid-template-columns: 50% 50%;
}

#example-2 > section:first-of-type {
    background-color : orange;
}

#example-2 > section:last-of-type {
    background-color : teal;
}

#example-3 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

#example-3 > section:first-of-type {
    background-color : orange;
    grid-column : 1 / 4;
}

#example-3 > section:last-of-type {
    background-color : teal;
    grid-column: 4 / 5;
}

#example-4 {
    display: grid;
    grid-template-columns: repeat(10, 10%);
}

#example-4 > section:first-of-type {
    background-color : orange;
    grid-column : 1 / span 4;
}

#example-4 > section:last-of-type {
    background-color : teal;
    grid-column: 5 / span 6;
}

#example-5 {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: 48% 48%;
    row-gap:1%;
    column-gap:1%;
}

#example-5 > section:nth-of-type(odd) {
    background-color : orange;
}

#example-5 > section:nth-of-type(even) {
    background-color : teal;
}