@media (max-width: 1400px){
    .topBar__menu nav ul, .topBar__info {
        gap: 20px;
    }
    .topBar__menu nav ul li a, .topBar__info {
        font-size: 14px;
    }
    .header__block nav ul {
        gap: 20px;
    }
    .header__block nav ul li a {
        padding: 15px 10px;
        font-size: 14px;
    }
    #logo {
        max-width: 80%;
    }
}

@media (max-width: 1280px){
    .header__block nav ul li a {
        font-size: 14px;
    }
    #logo {
        max-width: 202px;
    }
    .header__block nav ul li a {
        padding: 15px 5px;
    }
    .catalog {
        grid-template-columns: repeat(3, 1fr);
    }

    .advantages {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-block {
        grid-template-columns: repeat(2, 1fr);
    }
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
    .review-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .stocks {
        grid-template-columns: repeat(2, 1fr);
    }
    .callback-form-container {
        gap: 45px;
    }
    .form-header {
        min-width: inherit;
        max-width: 360px;
    }

    .form-header br {
        display: none;
    }
}

@media (max-width: 1090px){
    .header__block > nav > ul > li:not(.view),
    .topBar__menu {
        display: none;
    }

    .header__block nav ul li.menu-mobile-icon {
        display: flex;
    }

    .catalog {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-footer {
        flex-direction: column;
        align-content: center;
        align-items: center;
    }

    .logo-desc {
        text-align: center;
    }
    .footer-contacts {
        min-width: 220px;
        align-items: center;
    }

    sidebar {
        display: none;
    }

}

@media (max-width: 768px){
    .header__block nav > ul > li {
        display: none;
    }
    #logo {
        max-width: 148px;
    }
    header {
        top: 15px;
    }
    #topBar {
        display: none;
    }
    .header__block {
        gap: 15px;
    }
    .header__block-info .phone {
        font-size: 14px;
    }
    .container {
        padding: 0 15px;
    }
    .catalog {
        grid-template-columns: repeat(1, 1fr);
    }
    .advantages {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .articles {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .stocks {
        grid-template-columns: repeat(1, 1fr);
    }
    .gallery-block {
        gap: 16px;
    }

    .gallery-block > a {
        height: 157px;
    }
    .services {
        grid-template-columns: repeat(1, 1fr);
    }
    .review-cards {
        grid-template-columns: repeat(1, 1fr);
    }
    .service-switcher-wrapper {
        max-width: 60%;
    }
    .about-block {
        flex-direction: column;
        gap: 30px;
    }
    .card-content {
        flex-direction: column;
    }
    .wrapper {
        flex-direction: column;
    }
    .swiper-gallery {
        max-width: 100%;
    }
    .callback-form-container {
        flex-direction: column;
    }

    .form-input {
        min-width: inherit;
    }


}
@media (max-width: 600px) {
    .service-switcher-wrapper {
        max-width: 100%;
    }
    .review-wrapper {
        justify-content: end;
        align-items: end;
        flex-direction: column;
        gap: 15px;
    }
    .rating-main-value {
        font-size: 40px;
    }
    .grid-footer {
        gap: 30px;
    }
    .footer-menu ul li a {
        padding: 5px 0;
    }
    .footer-menu--wrapper {
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
    }
    .footer-menu {
        text-align: center;
        margin: 0 auto;
    }
    .footer-menu li {
        text-align: center;
    }
    .footer-menu ul li a {
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    #social {
        gap: 5px;
    }
    #social a {
        width: 40px;
    }
    .card-content-desc .card-content-block {
        width: 100%;
    }
    .card-content-desc {
        column-count: 1;
    }

    .footer-form {
        flex-direction: column;
    }
    .callback-form-container {
        gap: 10px;
        padding: 40px;
    }

}


@media (max-width: 480px) {
    #logo {
        max-width: 45%;
    }
    .sidebar-menu {
        font-size: 14px;
    }
    .slider-wrapper {
        left: 15px;
    }
    .sidebar-menu__footer a.phone {
        font-size: 21px;
    }
    .sidebar-menu__footer a.callback {
        font-size: 14px;
    }
    .hero form input {
        max-width: 175px;
    }
    .hero form button {
        font-size: 12px;
    }
    .service-switcher-wrapper {
        gap: 20px;
        max-width: 100%;
    }
    .articles {
        grid-template-columns: repeat(1, 1fr);
    }

    .form-header h1 br {
        display: none;
    }

    .form-header p {
        font-size: 14px;
        margin-top: 15px;
    }
    .form-input {
        padding: 10px 20px;
        font-size: 18px;
        min-width: 100%;
    }
    .footer-form {
        margin-top: 25px;
    }
}

@media (max-width: 1200px) {
    .card-thumbnail-swiper .swiper-wrapper {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .card-thumbnail-swiper .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }

    .card-thumbnail-swiper .swiper-slide {
        height: 90px;
    }
}

@media (max-width: 768px) {

    .card-thumbnail-swiper .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
}

@media (max-width: 576px) {
    .card-thumbnail-swiper .swiper-wrapper {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px;
    }
    .card-thumbnail-swiper .swiper-slide {
        height: 57px;
    }

}

@media (max-width: 400px) {
    .card-thumbnail-swiper .swiper-wrapper {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px;
    }
}