@media (min-width: 1024px) {
    .location-nav-family {
        position: relative;
    }

    .location-nav-toggle {
        background: none;
        border: 0;
        cursor: pointer;
        font: inherit;
        padding: 0;
    }

    .location-nav-toggle::after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        content: "";
        display: inline-block;
        margin-left: 7px;
        vertical-align: middle;
    }

    .location-nav-menu {
        background: var(--white);
        border-bottom: 7px solid var(--secondary-color, #374157);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        min-width: 220px;
        opacity: 0;
        padding: 12px 16px;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        transition: opacity 200ms ease, visibility 200ms ease;
        visibility: hidden;
        z-index: 20;
    }

    .location-nav-family:hover .location-nav-menu,
    .location-nav-family:focus-within .location-nav-menu {
        opacity: 1;
        visibility: visible;
    }

    .location-nav-menu a {
        color: var(--secondary-color, #374157);
        font-size: 1rem;
        padding: .25rem 0;
        margin: 0;
        text-decoration: none;
        white-space: nowrap;
    }

    .location-nav-menu a:hover,
    .location-nav-menu a:focus {
        color: var(--tertiary-color);
        text-decoration: underline;
    }
}