/*

This file describes styles that are 991px width or smaller

 */

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



    .grid-2, .grid-1-2, .grid-2-1, .content >.grid-1-2, .content >.grid-2-1{

        grid-template-columns: 1fr!important;

        gap: var(--size-2)

    }

    .grid-3{

        grid-template-columns: 1fr 1fr;

        gap: var(--size-2)

    }

    .main-block .text{

        padding: 0 20px

    }

  .main-block .content{

    flex-direction: column-reverse

  }

  .main-block .content >div{

    width: 100%

  }

    .main-block .content >div.media{

        max-height: 50dvh

    }

    .main-block .content >div.text{

        min-height: 50dvh;

        height: auto!important;

        padding: var(--size-3) 0

    }

    .infinite-sliders{

        max-height: 50dvh

    }

    .infinite-slider__items >div{

        font-size: 6rem

    }

    .services__item .media{

        grid-row: 1/1

    }

    .menu-btn-open{

        width: 30px;

        height: 20px

    }

    h1{

        font-size: 4.5rem

    }

    h2, .footer-top .title:not(.description .title){

        font-size: 2.8rem

    }

    h3{

        font-size: 2.4rem

    }

    h4{

        font-size: 2rem

    }



    ul li:not(nav ul li){

        padding-left: 30px

    }

    ul li:not(nav ul li):before{

        top: 2px;

        transform: scale(0.8)

    }

    p, .btn{

        font-size: 1.6rem!important

    }



}