.mapGrid {
    display: grid;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
}

#map {
    grid-column: 1 / 4;
    position: relative;
}

.mapPreview {
    width: 100%;
    display: block;
    border: 1px solid var(--sand-medium);    
}
.mapPreview:hover {
    box-shadow: 0 0 0 2px var(--sand-medium);
    cursor: pointer
}

.active-preview {
    box-shadow: 0 0 0 2px var(--sand-dark);
}

#map svg,
.mapPreview svg {
    width: 100%;
    height: 100%;
}

.mapPreview svg {
    padding: 0 5%;
}

#map text {
    width: 100%;
}

.legend-title {
    font-family: "questa-sans";
    font-size: 0.8rem;
    font-weight:500;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.legend-axis {
    font-family: "questa-sans";
    font-size: 0.6rem;
    font-variant-numeric: lining-nums;
}
.legend-container {
    position: absolute;
    right: 0;
    bottom: 0
}

#hexbin-tooltip{
    position: absolute;
    padding: 10px;
    background-color: var(--white);
    border: 1px solid var(--off-white);
    border-radius: 3px;
    font-size: 0.7rem;
    pointer-events: none;
    font-variant-numeric: lining-nums;

}