.contact-block {
    &__body {
        display: grid;
        gap: 32px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-template-columns: 1fr 1fr;
            row-gap: 98px;
            column-gap: 55px;
        }

        // min-width: 1200px
        @include _Desktop {
            grid-template-columns: 1fr 1.15fr;
            row-gap: 40px;
            column-gap: 70px;
        }

        // min-width: 1400px
        @include _LDesktop {
            grid-template-columns: 1fr 1.35fr;

            row-gap: 65px;
            column-gap: 50px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__header {
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            display: flex;
            gap: 20px;
            align-items: flex-end;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            flex-direction: column;
            align-items: unset;
            gap: 40px;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__title {
    }

    &__subtitle {
        margin-bottom: 32px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-bottom: 0;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__links {
        display: grid;
        gap: 24px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            padding-inline-end: 30px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__link {
        .header-contacts__item {
            display: inline-flex;
            gap: 16px;

            // min-width: 768px
            @include _Tablet {
                gap: 8px;
            }
        }

        .header-contacts__icon {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;

            // min-width: 1400px
            @include _LDesktop {
                flex: 0 0 32px;
                width: 32px;
                height: 32px;
            }
        }

        .header-contacts__value {
            font-weight: 700;
            font-size: rem(18);
            line-height: 140%;
            text-transform: uppercase;
            color: #ffffff;

            // min-width: 576px
            @include _SLMobile {
            }

            // min-width: 768px
            @include _Tablet {
                font-size: rem(14);
            }

            // min-width: 992px
            @include _Laptop {
            }

            // min-width: 1024px
            @include _XSDesktop {
                font-weight: 700;
                font-size: rem(16);
                line-height: 22px;
            }

            // min-width: 1200px
            @include _Desktop {
            }

            // min-width: 1400px
            @include _LDesktop {
                font-size: rem(20);
            }

            // min-width: 1600px
            @include _HDesktop {
            }
        }
    }

    &__maps {
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-row: span 2;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__map-tabs {
        margin-bottom: 16px;

        display: flex;

        // min-width: 768px
        @include _Tablet {
            display: none;
        }
    }

    &__map-tab {
        flex: 1;
        padding: 14px 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;

        &:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        &:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        &.active {
            border-color: cl("accent");
            background-color: cl("accent");
        }
    }

    &__map-items {
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr 1fr;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-template-columns: 1fr;
        }

        // min-width: 1200px
        @include _Desktop {
            grid-template-columns: 1fr 1fr;
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }
    &__map-item {
        // min-width: 768px
        @include _Tablet {
            display: block;
        }
    }

    &__footer-form {
        padding: 0 20px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            padding: 0;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }
}

.map-card {
    &__body {
        height: 100%;
        background-color: #000000;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            display: flex;
        }

        // min-width: 1200px
        @include _Desktop {
            flex-direction: column;
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__canvas {
        aspect-ratio: 340 / 193;

        background-color: cl("accent");

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            aspect-ratio: 334 / 240;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            aspect-ratio: unset;

            flex: 1 0 188px;
        }

        // min-width: 1200px
        @include _Desktop {
            aspect-ratio: 266 / 193;
            flex: unset;
        }

        // min-width: 1400px
        @include _LDesktop {
            aspect-ratio: 500 / 363;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__content {
        padding: 24px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            padding: 40px 24px;
        }

        // min-width: 1200px
        @include _Desktop {
            padding: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            padding: 40px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__city {
        margin-bottom: 8px;

        color: cl("accent");

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-bottom: 16px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-bottom: 8px;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-bottom: 16px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__addresss {
        margin-bottom: 8px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-bottom: 16px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-bottom: 8px;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-bottom: 16px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__grafik {
        color: rgba(255, 255, 255, 0.6);
    }

    &__link {
        margin-top: 32px;

        .arrow-link__arrow {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;

            &::after {
                background-size: 8px 9px;
            }

            img {
                width: 8px;
                height: 9px;
            }

            // min-width: 1400px
            @include _LDesktop {
                width: 40px;
                height: 40px;
                flex: 0 0 40px;

                &::after {
                    background-size: unset;
                }

                img {
                    width: unset;
                    height: unset;
                }
            }
        }

        .arrow-link__text {
            font-weight: 500;
            font-size: rem(12);
            line-height: 140%;

            text-transform: uppercase;
            color: #ffffff;

            // min-width: 576px
            @include _SLMobile {
            }

            // min-width: 768px
            @include _Tablet {
            }

            // min-width: 992px
            @include _Laptop {
            }

            // min-width: 1024px
            @include _XSDesktop {
                font-size: rem(10);
            }

            // min-width: 1200px
            @include _Desktop {
            }

            // min-width: 1400px
            @include _LDesktop {
                font-size: rem(14);
            }

            // min-width: 1600px
            @include _HDesktop {
            }
        }

        .arrow-link {
            display: inline-flex;

            // min-width: 1400px
            @include _LDesktop {
                gap: 16px;
            }
        }

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 24px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-top: 16px;
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 32px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }
}

.contact-form {
    &__body {
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-template-columns: 1fr;
            gap: 16px;

            padding-right: 54px;
        }

        // min-width: 1200px
        @include _Desktop {
            padding-right: 42px;
        }

        // min-width: 1400px
        @include _LDesktop {
            padding-right: 30px;
            gap: 32px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__descr {
        margin-bottom: 24px;

        color: cl("text", 0.6);

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-bottom: unset;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__form-wrapper {
        // min-width: 1024px
        @include _XSDesktop {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__fields {
        display: grid;
        gap: 16px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-template-columns: repeat(3, 1fr);
            column-gap: 8px;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            column-gap: 16px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__field {
        .input {
            width: 100%;
        }

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__consent {
        margin-top: 24px;
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 16px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            // padding-right: 40px;
            flex: 0 1 240px;
        }

        // min-width: 1200px
        @include _Desktop {
            flex: 1 1 100%;
            margin-top: 8px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 16px;

            .consent-block__label-text {
                max-width: 400px;
                display: block;
            }
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__submit {
        margin-top: 24px;

        .btn {
            width: 100%;

            font-weight: 500;
            font-size: rem(10);
            line-height: 1;

            text-transform: uppercase;

            color: #ffffff;

            // min-width: 1024px
            @include _XSDesktop {
                height: 100%;
                padding: 16px;
            }

            // min-width: 1400px
            @include _LDesktop {
                font-size: rem(14);

                padding: 22px 32px;
            }
        }

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 16px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            height: 40px;
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 24px;
            height: auto;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 40px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }
}
