*{
    box-sizing: border-box;
}

h1{
    width: 100%;
    font-size: 3vw;
}

body{
    background-color: white;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: 32%;
    justify-content: space-around;
}

img{
    width: 100%;
    height: 40%;
}
p{
    font-size: 2.5vw;
    width: auto;
    height: 325
}
#pie{
    height: 20%;
    color: blue;
}

@media screen and (max-width: 768px){
    body{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div{
        width:45%;
        margin: 10px auto;
    }
    div:last-of-type{
        width: 100%;
        margin: 50px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    img[alt=g3]{
        width: 40%;
    }

    section{
        width: 30%;
    }
}

@media screen and (max-width: 425px){
    body{
        padding: 0%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div{
        width:100%;
        margin: 10px auto;
    }
    img[alt=g3]{
        width: 100%;
        }
    
    section{
        width: 100%;
    }
    h1{
        font-size: 5vw;
    }
    p{
        font-size: 5vw;
    }
}