.main-navigation {
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--light);
}

.main-navigation .menu-toggle {
    background: none;
    border: none;
    appearance: none;
    padding: .3125rem .5rem;
    color: var(--light);
    transition: 300ms cubic-bezier(0.4, 0, 0.2, 1) all;
}

.main-navigation .nav {
    display: none;
    margin: 0;
}

.nav .nav-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor 1px);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: 300ms cubic-bezier(0.4, 0, 0.2, 1) all;
    letter-spacing: 3px;
}

.main-navigation .nav .nav-link:not(.dropdown-toggle):hover {
    background-size: 100% 1px;
    background-color: transparent;
}

.site-header.is--sticky .main-navigation,
.site-header.is--sticky .menu-toggle,
.site.no--banner .site-header .main-navigation,
.site.no--banner .site-header .menu-toggle {
    color: var(--primary-color);
}

.site-header.is--sticky .nav .nav-link,
.site.no--banner .site-header .nav .nav-link {
    background-image: linear-gradient(var(--primary-color), var(--primary-color) 1px);
}

@media (min-width: 768px) {
    .main-navigation .nav {
        display: flex;
    }

    .main-navigation .nav > .nav-item:not(:first-child) {
        margin-left: 2rem;
    }

    .main-navigation .nav .nav-link {
        padding: .25rem 0;
    }

    .main-navigation .nav .nav-link.active {
        background-color: transparent;
        background-size: 100% 1px;
        font-weight: 700;
    }

    .main-navigation .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        font-size: .875rem;
        text-transform: none;
        padding: .5rem 1rem;
        border: none;
        border-radius: .125rem;
        transition: 300ms cubic-bezier(0.4, 0, 0.2, 1) all;
    }

    .main-navigation .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    .main-navigation .dropdown .dropdown-item {
        padding: .25rem 0;
        width: auto;
        letter-spacing: 1px;
    }
}