/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    body, .main-block p, .main-block ul li, ul.focus li{
        font-size: 1.8rem
    }    
    h1 {
        font-size: 2.8rem
    }
    h2 {
        font-size: 2.4rem
    }
    h3, .advantages__item .title .text {
        font-size: 2.4rem
    }
    .advantages__item .title .text{
        max-width: 200px
    }
    .subtitle {
        font-size: 1.3rem;
        letter-spacing: 3px
    }
    .text-after-title{
        line-height: 1.3
    }
    .main-block .container{
        justify-content: flex-end;
        padding-bottom: var(--section-distance)
    }
    .main-block .btns{
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-1)
    }
    .btn, input[type="button"]{
        height: 44px
    }
    .advantages__item .title .icon {
        height: 80px;
        margin-right: -42px
    }
    .advantages__item .title .text{
        margin-left: -42px
    }
  
    .header .container > .logo {
        height: 120px
    }
    section.focus ul.focus{
        flex-direction: column;
        margin-top: var(--size-2);
        row-gap: var(--size-1);
    }
    ul.focus li:before{
        width: 12px;
        height: 12px;
        top: 10px
    }
    ul.focus li{
        padding-left: 34px;
        width: 100%
    }


    
  
}
@media all and (max-width: 600px){
   

   
}
@media all and (max-width: 480px){
   
   
}
@media all and (max-width: 400px){
   
    section p:not(:first-child) {
        margin-top: var(--size-1)
    }


}
@media all and (max-width: 360px){
   
   
}