/* WRAPPER */
.map-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

/* IFRAME */
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%) contrast(1.2);
    transition: 0.6s;
}

/* HOVER */
.map-wrapper:hover iframe {
    filter: grayscale(0%) contrast(1);
}

/* FRAME */
.map-frame {
    position: absolute;
    inset: 0;
    border: 20px solid var(--color-white);
    pointer-events: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .map-wrapper {
        aspect-ratio: 16 / 9;
    }
    .map-wrapper iframe {
        filter: grayscale(0%) contrast(1);
    }

}

@media (max-width: 420px) {
    .map-wrapper {
        aspect-ratio: 1;
    }

}