@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
main{
    margin-top: 60px;
}
main h1{
    font-size: 38px;
    text-align: center;
    font-weight: 600;
}
section{
    font-weight: 300;

    width: 98;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
}
section img{
    width: 100%;
}
.section-img{

    width: 90%;
    margin: auto;
    padding: 5px;
}
.section-descripcion{

    text-align: justify;
    width: 98%;
    margin: 8px auto 0px;
    padding: 10px;
    display: flex;
    align-items: center;
}

.section-img img{
    width: 100%;
}
article{
    text-align: justify;
    width: 98;
    max-width: 1000px;
    margin: 10px auto;
}
article h2{
    margin-bottom: 15px;
}
/*-----------------500----------------------------------*/
@media (min-width: 500px) {
    .section-img{
        text-align: center;
    }
    .section-img img{
        width: 80%;
    }
    .section-descripcion{
        padding: 20px;
    
    }
   
    }

    /*-----------------600----------------------------------*/
@media (min-width: 600px) {
  
    section{
        width: 80%;
    }
  
   
    }
        /*-----------------800----------------------------------*/
@media (min-width: 800px) {
    section{
        width: 98%;
        flex-direction: row;
    }
    .reverse{
        flex-direction: column;
    }
    .reverse .section-img{
        width: 60%;
    }
    .reverse .section-descripcion{
        width: 80%;
    }
    .section-img, .section-descripcion{
        width: 49%;
        
    }
    .section-img img{
        width: 98%;
    }
   
   
    }
      /*-----------------1000----------------------------------*/
@media (min-width: 1000px) {
    .section-img, .section-descripcion{
        width: 45%;
        
    }
    .reverse .section-img{
        width: 50%;
    }
    .reverse .section-descripcion{
        width: 80%;
    }
    }
     /*-----------------1100----------------------------------*/
@media (min-width: 1100px) {
    section{
        width: 90%;
        max-width: 1150px;
    }
    .section-img{
        width: 40%;
    }
   
    }