@media (max-width: 1023.98px) {

    header {
        .container a svg {
            width: 110px;
            height: 44px;
        }
    }
    
    .top {
        .background_image::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: calc(100% - 100vw);
            right: calc(100vw - 100%);
            background: linear-gradient(
                to right, 
                rgba(255, 255, 255, 1) 0%,     /* чисто белый слева */
                rgba(255, 255, 255, 0.8) 30%,  /* лёгкий переход */
                rgba(255, 255, 255, 0) 100%     /* полная прозрачность на середине */
            );
            pointer-events: none;
        }
    }

    .profluidable {
        *[grid] {

            .card {
                padding: 37px 24px;
                flex-direction: column-reverse;
                text-align: center;
                align-items: center;

                .item_text {
                    display: flex;
                    flex-direction: column;
                    gap: 14px;
                }
            }
        }
    }

    .four_steps {

        *[fluid] h2 {
            text-align: center;
        }
        
        *[grid] {
            row-gap: 40px;
            .step {
                flex-direction: row;
                gap: 18px;

                .card {
                    min-height: auto;
                    padding: 40px 20px;
                }
                .circle h2 {
                    font-size: 40px;
                    width: 60px;
                    height: 60px;
                }
                .circle::after {
                    width: 4px;
                    height: 120%;
                    transform: translateY(-30%) translateX(-50%);
                }
            }
        }
    }


    .bottom {
        .logo {
            position: relative;
            text-align: center;

            img {
                width: 278px;
                max-width: 100vw;
            }
        }

        .map_container {
            grid-row: 2;

            iframe {
                height: 190px;
            }
        }
    }

    .faq {
        .faq_list > li {
            padding: 18px 20px;
        }
    }

    footer {
        .logo {
            position: relative;
            top: 0;

            picture {
                width: 94px;
                max-width: 100vw;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .modal {
        max-width: 100vw;
        padding: 13px 16px 32px 21px;

        .logo {
            picture {
                max-width: 112px;
            }
        }

        div[action="close"] {
            width: 12px;
            height: 12px;
        }
        .form *[grid] label {padding: 11px 20px;}
        
            *[checkbox] {
                width: 1.2rem !important;
                height: 1.2rem !important;
            }
    }

}