.marker {
align-items: center;
background-color: #FFFFFF;
border-radius: 50%;
color: #263238;
display: flex;
font-size: 14px;
gap: 15px;
height: 20px;
justify-content: center;
padding: 4px;
position: relative;
position: relative;
transition: all 0.3s ease-out;
width: 20px;
}

.marker::after {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #FFFFFF;
content: "";
height: 0;
left: 50%;
position: absolute;
top: 90%;
transform: translate(-50%, 0);
transition: all 0.3s ease-out;
width: 0;
z-index: 1;
}

.marker .icon {
align-items: center;
display: flex;
justify-content: center;
width: 15px;
height: 15px;
}

.marker .details {
display: none;
flex-direction: column;
flex: 1;
}

.marker .features {
align-items: flex-end;
display: flex;
flex-direction: row;
gap: var(--spacer);
}

.marker.highlight {
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
height: 90px;
padding: 8px 15px;
width: 290px;
}

.marker.highlight::after {
border-top: 9px solid #FFFFFF;
}

.marker.highlight .details {
display: block;
}

.marker.highlight .icon {
display: none;
}