/* Basic styles and resets */
.ysp-map-container {
    display: flex;
    width: 100%;
    height: 450px;
}

.ysp-map-list, .ysp-map {
    box-sizing: border-box; /* Makes sure padding doesn't expand the divs */
}

/* List of places styling */
.ysp-map-list {
    flex-basis: 40%; /* Ensures the list takes up 25% of the container */
    overflow-y: auto; /* Scroll if there are more items */
}

.ysp-map-list a {
    font-size:16px;
    text-transform:uppercase;
    font-weight:600;
    text-decoration: none;
    color: #333;
    display: block;
    margin-bottom: 15px;
}


/* Map styling */
.ysp-map {
    flex-basis: 60%; /* Ensures the map takes up 75% of the container */
    background-size: contain;
    position: relative;
    background-repeat:no-repeat;
}

.ysp-place-svg {
    position: absolute;
    max-width: 100%;
    transition: opacity 0.3s;
    opacity:0;
    height:450px;
}

/* Responsive Styling */
@media (max-width: 991px) {
    .ysp-map-container {
        flex-direction: column;
         height: 800px;
    }
    .ysp-place-svg {
           height: -webkit-fill-available;
    }

    .ysp-map-list, .ysp-map {
        flex-basis: 100%;
    }

}

@media (max-width: 560px) {
    .ysp-place-svg {
           height: auto;
    }
}