header.hdr6 .menu-item a {
    padding: 0.5rem 0.5rem;
    display: flex;

    border-radius: 4px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

header.hdr6 .menu-item a:hover {
    @media (any-hover: hover) {
        background: var(--primary-700);
        color: #fff;
    }
}

header.hdr6 #menu {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.6s ease-in-out;
}

header.hdr6 #menu.active {
    max-height: 500px;
    overflow: auto;
}