
.parent {
display: grid;
justify-content: center;
grid-template-columns: 0 40% 0 40% 0;
grid-column-gap: 1%;
}
h1{
    padding-bottom: 5vh;
}
h2{
    text-align: center;
    font-size: 1rem;
}
h3{
    font-size: 1.5rem;
}

.div1 { 
    grid-area: 1 / 2 / 2 / 3; 
    text-align: center;
    font-size: 3em;
    color: rgb(26, 90, 24);
}
.div2 { 
    grid-area: 1 / 4 / 2 / 5; 
    text-align: center;
    font-size: 3em;
    color: red;
}
.div3 { 
    grid-area: 2 / 2 / 3 / 3; 
}
.div4 { 
    grid-area: 2 / 4 / 3 / 5; 
}
.div5 { 
    grid-area: 4 / 2 / 5 / 3; 
}
.div6 { 
    grid-area: 4 / 4 / 5 / 5; 
}
.div7 { 
    grid-area: 6 / 2 / 7 / 3; 
}
.div8 { 
    grid-area: 6 / 4 / 7 / 5; 
}
.div9 { 
    grid-area: 8 / 2 / 9 / 3; 
}

table{
    border-color: black;
    border-width: 2px ;
    border-style: solid;
    width: 100%;
    font-size: 1.5em;
    background-color: rgb(211, 168, 168);
    height: 80vh;
    border-radius: 20px;
}

td{
    padding: 0.3em;
}
@media (max-width: 768px) {
    section{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
    h1{
        padding-top: auto;
        padding-bottom: 0;
    }
    h2{
        font-size: 1em;
        padding-bottom: 0;
    }    
    table, tr, td{
        display: block;
        width: 100%;
        font-size: 1.1em;
        height: auto;
    }
    td{
        margin-bottom: 1em;
        padding-right: 0;
    }

    li{
        list-style-type: none;
    }
}