.menu-label .menu-icon-close {
    display: none;
    font-size: 2.25rem;
    line-height: 0.65;
}

.menu-toggle:checked + .menu-label .menu-icon-open {
    display: none;
}

.menu-toggle:checked + .menu-label .menu-icon-close {
    display: inline-block;
}

@media (max-width: 768px) {
    #primary-menu > .navbar-nav {
        display: flex;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition:
            max-height 350ms ease 100ms,
            opacity 350ms ease 100ms,
            visibility 0ms linear 450ms;
    }

    #primary-menu > .menu-toggle:checked ~ .navbar-nav {
        max-height: 60rem;
        opacity: 1;
        visibility: visible;
        transition:
            max-height 350ms ease 100ms,
            opacity 350ms ease 100ms,
            visibility 0ms linear 100ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    #primary-menu > .navbar-nav,
    #primary-menu > .menu-toggle:checked ~ .navbar-nav {
        transition: none;
    }
}