.map-wrapper {
    visibility: hidden; /* Hide the map */
    opacity: 0; /* Make it invisible */
    height: 0; /* Collapse the height */
    transition: visibility 0s, opacity 0.3s ease; /* Smooth transition */
    width: 700px;
}

/* Map Active */

.map-active .map-wrapper {
    visibility: visible; /* Show the map */
    opacity: 1; /* Make it visible */
    height: auto; /* Restore the height */
    flex: 0 0 40%; /* Adjust the flexbox layout */
    width: auto;
}

.map-active.destinations-outer {
    display: flex;
    gap: 32px;
}

.map-active .destination-item {
    flex: 1 0 calc(50% - 32px);
    max-width: calc(50% - 16px);
}

.map-active .map-wrapper {
    display: block;
    flex: 0 0 40%;
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {
    .map-active.destinations-outer {
        flex-direction: column-reverse;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
}