@media screen and (min-width: 300px) and (max-width: 800px) {
    .container {
       flex-direction: column;
       overflow: visible;
       height: auto; 
    }

    body {
        background: rgb(30, 30, 32);
    }

    .popit-1, .popit-2, .popit-3 {
        margin: 7px 0px;
    }

    .popit-1 {
        width: 350px;
        height: 350px;
    }

    .popit1__circle {
        width: 50px;
        height: 50px;
        margin: 0 2.5px;
    }
    
    .popit-2 {
        width: 350px;
        height: 350px;
    }

    .popit2__circle {
        width: 50px;
        height: 50px;
        margin: 0 2px;
    }
    
    .popit-3 {
        width: 375px;
        height: 350px;
    }
    
    .popit3__circle {
        width: 45px;
        height: 45px;
        margin: 0 2.5px;
    }

    .popit3__line:nth-child(1) .popit3__circle {
        width: 45px;
        height: 45px;
    }

    .popit3__line:nth-child(3) .popit3__circle {
        width: 45px;
        height: 45px;
    }

    .popit3__line:nth-child(4) .popit3__circle {
        width: 45px;
        height: 45px;
    }

    .popit3__line:nth-child(5) .popit3__circle {
        width: 50px;
        margin: 0 5px;
        height: 50px;
    }

    .popit3__line:nth-child(6) .popit3__circle {
        margin: 0 2px;
        width: 47px;
        height: 47px;
    }
}