@media (max-width: 480px) {
main{
    width: 85%;

}
    article{
    grid-template-columns: 1fr;
    width: 100%;
}
article section:nth-child(1) header figure{
    padding: 8px 0;
   text-align: center;
}
article section:nth-child(1) header figure > img{
width: 250px;
}

article section:nth-child(1) .contentTitle{
    width: 100%;
}
article section:nth-child(1) .contentTitle > h1{
    font-size: 24px;
    text-align: center;
}

 .boxText, textarea, .sltText{
    width: 100%!important;
 }

}

@media only screen and (max-width: 600px) {
    main{
        width: 85%;
    
    }
        article{
        grid-template-columns: 1fr;
        width: 100%;
    }
    article section:nth-child(1) header figure{
        padding: 8px 0;
       text-align: center;
    }
    article section:nth-child(1) header figure > img{
    width: 250px;
    }
    
    article section:nth-child(1) .contentTitle{
        width: 100%;
    }
    article section:nth-child(1) .contentTitle > h1{
        font-size: 24px;
        text-align: center;
    }
   
     .boxText, textarea, .sltText{
        width: 100%!important;
     }
}

@media (min-width: 481px) and (max-width: 767px) {

}

@media (min-width: 768px) and (max-width: 1024px) {
    main{
      
        width: 90%;
    }
    article{
        grid-template-columns: 55% 35%;
        height: auto;
        column-gap: 64px;
    }
    article section:nth-child(1) .contentTitle{
        width: 100%;
    }
    .boxText, textarea, .sltText{
        width: 100%!important;
     }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    main{
      
        width: 90%;
    }
    article{
        grid-template-columns: 60% 40%;
      
    }
   
     article section:nth-child(2) figure{
    
        text-align: center;
        }
        article section:nth-child(2) figure > img{
            width: 50%;
        }
}

@media (min-width: 1281px) {
main{
    width: 80%;
}
}