.map {
    margin-bottom: 7px;
    position: relative;
    height: clamp(46rem, 100vh, 61rem);
    padding-top: 148px;
    overflow: hidden;

    @include breakpoint-down('lg') {
        height: clamp(45rem, 85vh, 45rem);
        padding-top: 55px;
    }

    @include breakpoint-down('sm') {
        height: auto;
        padding-top: 43px;
        padding-bottom: 55px;
        margin-bottom: 0;
    }

    .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        height: 100%;

        @include breakpoint-down('sm') {
            display: flex;
            flex-direction: column-reverse;
            grid-template-columns: none;
        }
    }

    .app-section {
        margin-bottom: 7px;

        &__inner {
            position: relative;
            top: -50px;
            z-index: 1;
            grid-area: 1/1/1/13;
            height: 100%;

            @include breakpoint-down('lg') {
                top: -56px;
            }

            @include breakpoint-down('sm') {
                position: static;
            }

            h1 {
                text-align: center;
                font-weight: 700;
                letter-spacing: -1.4px;

                @include breakpoint-down('sm') {
                    text-align: left;
                }
            }
        }

        &__header {

            @include breakpoint-down('lg') {
                margin-bottom: 20px !important;
                text-align: left;
            }

            @include breakpoint-down('sm') {
                margin-bottom: 30px !important;
            }
        }
    }

    &__description {
        display: none !important;
    }

    &__coords {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 50%;
        z-index: 5;
        max-width: 1209px;
        width: 100%;
        transform: translateX(-50%);

        @include breakpoint-down('lg') {
            width: 800px;
            top: 40px;
        }

        @include breakpoint-down('sm') {
            position: static;
            transform: none;
            width: 100%;
        }

        &-city {
            position: absolute;
            top: calc(var(--y-coord) * 1%);
            left: calc(var(--x-coord) * 1%);
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: 600;

            @include breakpoint-down('sm') {
                position: static;
                transform: none;
                background: #F5F7F9;
                border: thin solid #DAE3E9;
                border-radius: 5px;
                margin-bottom: 8px;
                padding: 12.5px 16px;

                &:last-of-type {
                    margin-bottom: 0;
                }
            }

            &:hover {
                --animation: pulse 1s linear infinite;
            }

            &--left {

                .map__coords-city-count {
                    margin-right: 7px;
                    margin-left: 0;

                    @include breakpoint-down('sm') {
                        margin-right: 0;
                    }
                }
                .map__coords-city-inner {
                    position: absolute;
                    right: 30px;
                    flex-direction: row-reverse;
                    white-space: nowrap;

                    @include breakpoint-down('sm') {
                        position: static;
                        flex-direction: row;
                    }
                }
            }
        }

        &-city-inner {
            display: flex;
            align-items: center;

            @include breakpoint-down('sm') {
                width: 100%;
                justify-content: space-between;
            }
        }

        &-city-img {
            display: none;
            width: 23px;
            height: 15px;
            object-fit: cover;
            margin-right: 11px;
            border-radius: 3px;
            border: thin solid #BCC6CF;
            background: white;

            @include breakpoint-down('sm') {
                display: block;
            }
        }

        &-city-marker {
            position: relative;
            width: 8px;
            height: 8px;
            margin-right: 1rem;
            border-radius: 50%;
            background: var(--color-highlight);

            @include breakpoint-down('sm') {
                display: none;
            }

            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 8px;
                height: 8px;
                margin: auto;
                background: var(--color-highlight);
                border-radius: 50%;
                transform: scale(0.5);
                transform-origin: center center;
                animation: var(--animation, none);
            }

            &:after {
                animation-delay: .4s;
            }
        }

        &-city-name {

            @include breakpoint-down('lg') {
                font-size: 16px;
            }
        }

        &-city-count {
            margin-left: 7px;
            background: var(--color-highlight);
            width: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;

            @include breakpoint-down('sm') {
                height: 23px;
                width: 29px;
                border-radius: 5.45px;
            }

            &-text {
                font-weight: 500;
                color: map_get($pallete, text-light);
                height: 14px;
                font-size: 12px;

                @include breakpoint-down('sm') {
                    font-size: 16px;
                    height: 21px;
                }
            }

            &--disable {
                background: #BCC6CF;
                display: none;

                @include breakpoint-down('sm') {
                    display: flex;
                }
            }
        }
    }

    &__media {
        position: absolute;
        top: 38px;
        right: 0;
        bottom: 0;
        left: 50%;
        display: flex;
        justify-content: center;
        max-width: 1209px;
        width: 100%;
        transform: translateX(-50%);

        @include breakpoint-down('lg') {
            top: 105px;
            width: 820px;
        }

        @include breakpoint-down('sm') {
            display: none;
        }

        img {
            height: 100%;
            transform: translateX(-60px);

            @include breakpoint-down('lg') {
                transform: translateX(-33px);
            }
        }
    }
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    opacity: 0.1;
  }

  70% {
    opacity: 0.09;
  }

  100% {
    transform: scale(5);
    opacity: 0;
  }
}