/*
This file describes styles that are 991px width or smaller
 */
@media all and (max-width: 991px){
    h1{
        font-size: 12rem
    }
    .grid-3, .grid-4, .footer {
        grid-template-columns: 1fr;
        gap: var(--size-2)
    }
    .grid-2{
        gap: var(--size-2)
    }
    .counter-item:not(:first-child) {
        padding-left: 0;
        border-left: none
    }
    .projects-slider {
        width: 100%!important;
        margin: var(--size-2) 0 0
    }
    .projects-slider .img-container >img{
        height: 520px!important
    }
    .projects-slider .item .btn {
        bottom: var(--size-1)
    }
    .projects-slider .item .text{
        top: var(--size-1);
        left: var(--size-1)
    }
    .projects{
        padding: 124px 0
    }
    .projects .decor-left, .projects .decor-right{
        height: 76px;
        width: 100%;
        left: 0
    }
    .projects .decor-left{
        top: -100px
    }
    .projects .decor-right{
        top: auto;
        bottom: -100px
    }
    .footer-title {
        margin-bottom: var(--size-1)
    }
   
}