#city-select{
    width: fit-content;
}



.cities {
    display: flex;
    /* align-items: center; */
    gap: 1rem;
}

.department.active{
    fill: #FFBC00;
}

.cities__list{
    width: fit-content;
    flex: 1;
    & h2{
        font-size: 1.2rem;
    }
}

.map-container{
    flex: 3;
    fill: #c4c4c4;
    width: 100%;

    & svg{
        transform: rotate(4deg);
    }
}

.cities{
    fill: var(--color-primary)
}

.city{
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: rotate(-4deg);
    &:hover{
        fill: var(--color-accent)
    }

    &.active{
        fill: var(--color-accent);
    }
}


.departments {
    transform: translate(-16px, -31px);
}


.cities-wrapper.content__section {
    &.content__section--flex {
        gap: 0;
    }
}

.city-info {
    flex: 1;
    position: absolute;
    top: 9rem;
    right: 0;
    max-width: 260px;
    width: 100%;
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid var(--color-secondary-light);
    box-shadow: 0 0 10px var(--color-accent);
    transform: translateY(100%);
    opacity: 0;
    z-index: 5;
    animation: up-opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards, box-shadow 2s .3s ease alternate infinite;

    & h3 {
        color: var(--color-text);
        margin-bottom: 0;
    }

    & img{
        border-radius: 1rem 1rem 0 0;
        min-height: 170px;
        object-fit: cover;
    }

    & .city__content{
        padding: 1rem;
    }
}

.city-info-mobile {
    display: flex;
    gap: 1rem;
    max-width: 100%;
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-primary-33);

    & img {
        width: 25%;
        border-radius: 1rem;
        border: 1px solid var(--color-secondary);
        box-shadow: 0 3px 5px var(--color-accent);
    }

    & h3{
        margin: 0;
    }
}

@keyframes up-opacity {
    from{
        transform: translateY(100%);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes box-shadow {
    from{
        box-shadow: 0 0 10px var(--color-accent);
    }
    to{
        box-shadow: 0 0 30px var(--color-accent);
    }
}


@media screen and (max-width: 767px) {

    .cities {
        flex-direction: column;
    }

    .map-container{
        padding-top: 1rem;
    }
}