.map {
    background-color: var(--grey);
    overflow: hidden;
    position: relative
}

.map__container {
    display: -ms-grid;
    display: grid;
    height: 100%;
    position: relative;
    z-index: 2;
    -ms-grid-columns: 1fr;
    gap: 1.5rem;
    grid-template-columns:1fr;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem
}

.map__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    gap: 1.5rem;
    justify-content: center
}

.map__title {
    margin: 0
}

.map__statistics {
    display: none
}

.map__button {
    width: 100%
}

.map__alert {
    background-color: var(--white);
    border-radius: .75rem;
    color: var(--grey-3);
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    position: relative
}

.map__alert:before {
    background-color: #e0def7;
    bottom: 1.875rem;
    content: "";
    left: 1.5rem;
    position: absolute;
    top: 1.875rem;
    width: .1875rem
}

.statistics {
    padding-left: 1.5rem;
    position: relative
}

.statistics:before {
    border-left: .1875rem solid var(--grey-1);
    bottom: .5625rem;
    content: "";
    left: 0;
    position: absolute;
    top: .5625rem
}

.statistics__title {
    color: var(--primary);
    margin: 0
}

.statistics__description {
    color: var(--grey-2);
    margin: 0
}

.map-contact {
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    background-color: hsla(0, 0%, 100%, .5);
    border: .0625rem solid #e3e6ed;
    border-radius: .75rem;
    -webkit-box-shadow: 0 .25rem 2.5rem 0 rgba(29, 29, 31, .1);
    box-shadow: 0 .25rem 2.5rem 0 rgba(29, 29, 31, .1);
    overflow: hidden
}

.map-contact__image {
    height: 12.5rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    width: 100%
}

.map-contact__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.5rem 1.5rem 1rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .75rem
}

.map-contact__link {
    color: var(--grey-2);
    text-decoration: none
}

.map-contact__link:focus {
    color: var(--primary-hover)
}

.map-contact__open {
    border-top: .0625rem solid var(--grey-1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1rem 1.5rem 1.5rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5rem
}

@media (hover: hover) {
    .map-contact__link:hover {
        color: var(--primary-hover)
    }
}

#map {
    height: 18.75rem;
}

#map [class*=ymaps][class*=-ground-pane] {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

@media (min-width: 48rem) {
    #map {
        height: 25rem;
    }

    .map__container {
        -ms-grid-columns: 1fr 6.875rem 1fr;
        gap: 6.875rem;
        grid-template-columns:1fr 1fr;
        padding-top: 3rem
    }

    .map__info {
        gap: 3rem
    }

    .map__statistics {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 5rem
    }

    .map__button {
        width: auto
    }

    .map__contact {
        width: 19rem
    }

    .map__alert {
        max-width: 24.6875rem
    }
}

@media (min-width: 64rem) {

}

@media (min-width: 80rem) {
    .map__container {
        display: block;
        padding-bottom: 0;
        padding-top: 0
    }

    .map__contact {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        left: 28.125rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}