#map {
    width: 100%;
    min-height: 55vh;
}

.location {
    padding: 1rem;
    position: relative;
}

.location.selected {
    outline: 1px solid var(--bs-primary);
    outline-offset: -10px;
}

.location .name {
    font-size: 1.5rem;
    line-height: 1;
    font-family: var(--bs-body-font-family);
    font-weight: bold;
    text-transform: uppercase;
}


.location a.name {
    color: var(--bs-primary);
    text-decoration: none;
}
.location a.name:hover {
    color: var(--bs-link-hover-color-rgb)
}


.location .name a {
    color: var(--bs-primary);
        text-decoration: none;
    }

.location .name a:focus,
.location .name a:hover {
    outline: 0px none;
    color: var(--bs-link-hover-color-rgb)}

.locate-grid-container {
    display: flex;
    flex-direction: column;
}

.locate-results {
    flex: 1 1 auto;
    overflow-y: auto;
    order: 2;
}

.locate-map {
    flex: 1 1 auto;
    min-height: 60vh;
    order: 1;
}

@media (min-width: 992px) {
    .location .hours {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .locate-grid-container {
        flex-direction: row;
    }

    .locate-results {
        flex: 0 1 40%;
        max-height: 100vh;
        overflow-y: auto;
        order: 1;
    }

    .locate-map {
        flex: 0 1 60%;
        max-height: 100vh;
        min-height: 60vh;
        order: 2;
    }
}

@media (min-width: 1200px) {
    .locate-results {
        flex: 0 1 35%;
    }

    .locate-map {
        flex: 0 1 65%;
    }
}

@media (min-width: 1400px) {
    .locate-results {
        flex: 0 1 30%;
    }

    .locate-map {
        flex: 0 1 70%;
    }
}