@media (max-width:700px){
    .main{
        .main-section-card{
            .card-article{
                flex-direction: column;
                height: auto;

                .article-left{
                    width: 100%;
                }

                .article-right{
                    width: 100%;

                    .right-iframe,
                    .right-videos{

                        .inframe-content,
                        .videos-content{
                            flex-direction: column;
                            row-gap: 20px;

                            .content-iframe,
                            .content-video{
                                width: 100%;
                            
                            }

                        }
                    }
                }
            }

            #boceto-diseno,
            #importancia-programacion-web{
                .article-right{
                    order: 1;
                }
            }
        }
    }
}

@media (min-width:701px) and (max-width:1000px){

    .main{
        .main-section-card{
            .card-article{
                flex-direction: column;
                height: auto;
                .article-left{
                    width: 100%;
                }
                
                .article-right{
                    width: 100%;
                }
            }
        }
    }
}