#map {min-height: 300px;width: 100%;aspect-ratio: 1.5 / 1;}

.ref-marker {font-size:.8rem;position: relative;}
.ref-marker .icon img {height: 35px;width: auto;}
.ref-marker .details {display: none;flex-direction: column;flex: 1;font-family: "Poppins", sans-serif;}
.ref-marker.highlight .details {border-radius:var(--bs-border-radius);background-color: #FFFFFF;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);padding:25px;width: 300px;display:block;position: absolute;bottom: calc(100% + 10px);left: 50%;transform: translateX(-50%);z-index: 10;}
.ref-marker.highlight .details::before, .ref-marker.highlight .details::after {content: '';position: absolute;left: 50%;transform: translateX(-50%);width: 0;height: 0;}
.ref-marker.highlight .details::before {bottom: -12px;border-left: 12px solid transparent;border-right: 12px solid transparent;border-top: 12px solid rgba(0, 0, 0, 0.1);z-index: 9;}
.ref-marker.highlight .details::after {bottom: -10px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #FFFFFF;z-index: 11;}
.ref-marker.highlight .details h4 {font-weight:var(--bs-body-font-weight)}
.ref-marker.highlight .details .fa-times {position:absolute;right:20px;top:15px;}
.ref-marker.highlight .details .directions-link {text-transform:uppercase}

@media screen and (max-width:767px) {
    #map {height: 400px;}
    .ref-marker.highlight {width:300px;}
    .ref-marker.highlight .details .fa-angle-right {font-size:20px;}
    .ref-marker.highlight .details h4 {font-size:16px;line-height:normal;}
}