@charset "UTF-8";
.map-list, .map-address { width: 100%; }
.map-list { background-color: white; }
.map-address {
    background-color: #F9F9FA;
    transition: all 0.3s ease;
    cursor: pointer;
}
.map-address button {
    color: #202020;
    background-color: transparent;
}
.map-address:hover { background-color: #F4F4F6; }
.map-address button, .map-list--points {
    display: block;
    margin: 0;
    padding: 0;
}

/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) {
    .map { padding: 8rem 0; }
    .map-list { gap: 2.4rem; }
    .map-list--addresses {
        width: 46rem;
        height: 47.1rem;
    }
    .map-address { padding: 1.6rem 1.6rem 5.1rem 1.6rem; }
    .map-list--points {
        width: 98.8rem;
        height: 47.1rem;
    }
}


/* Desktop (All screens) */
@media (min-width: 1025px) {
    .map .wrapper { gap: 3.2rem; }
    .map-list {
        padding: 2.4rem;
        border-radius: 1.6rem;
    }
    .map-list--addresses { gap: 0.8rem; }
    .map-address {
        gap: 0.8rem;
        border-radius: 0.8rem;
    }
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
    .map { padding: 5.6rem 0; }
    .map-list { gap: 1.6rem; }
    .map-list--addresses {
        width: 35.2rem;
        height: 41.2rem;
    }
    .map-address { padding: 1.6rem 1.6rem 3.9rem 1.6rem; }
    .map-list--points {
        width: 86.4rem;
        height: 41.2rem;
    }
}

/* Desktop (All screens) + Tablet */
@media (min-width: 600px) {
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
    .map { padding: 5.6rem 0; }
    .map .wrapper { gap: 2.4rem; }
    .map-list { border-radius: 1.2rem; }
    .map-list--addresses {
        width: 32.4rem;
        height: 32.8rem;
    }
    .map-list--points {
        width: 34.8rem;
        height: 32.8rem;
    }
}

/* Tablet + Mobile */
@media (max-width: 1289px) {
    .map-list {
        padding: 1.6rem;
        gap: 1.6rem;
    }
    .map-list--addresses { gap: 0.8rem; }
    .map-address {
        padding: 1.6rem;
        gap: 0.8rem;
        border-radius: 0.6rem;
    }
}

/* Mobile Only */
@media (max-width: 599px) {
    .map { padding: 4.8rem 0; }
    .map .wrapper { gap: 3.2rem; }
    .map-list {
        flex-direction: column;
        border-radius: 0.8rem;
    }
    .map-list--addresses {
        width: 31.1rem;
        height: 32.4rem;
    }
    .map-list--points {
        width: 31.1rem;
        height: 38rem;
    }
}