@media (max-width:1024px){

}
@media (max-width:860px){
    .grid{
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(2, 1fr);;
    }
}
@media (max-width:640px){

}
@media (max-width:480px){
    .grid{
        display: block;
    }
}

/* ------- min width -------------- */

@media (max-width:480px){
    #viewer-container iframe{
        width: 480px;
        height:300px;
    }
}

@media (max-width:640px){
    #viewer-container iframe{
        width: 640px;
        height:480px;
    }
}

@media (min-width:860px){
    #viewer-container iframe{
        width: 860px;
        height:640px;
    }
}

@media (min-width:1024px){
    #viewer-container iframe{
        width: 1024px;
        height:720px;
    }
}