.navigation-links {
    --item-side-padding: var(--space-3);

    display: flex;
    align-items: flex-end;
}

.navigation-links .link-item {
    position: relative;
    display: block;
    padding: var(--space-3) var(--item-side-padding);
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--text-lg);
    letter-spacing: .05rem;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--white);
    line-height: var(--leading-none);
}

.navigation-links .link-item::after {
    position: absolute;
    right: var(--item-side-padding);
    bottom: 0;
    left: var(--item-side-padding);
    display: none;
    height: 6px;
    background: var(--yellow);
    content: '';
}

@media (hover: hover) {
    .navigation-links .link-item:hover::after {
        display: block;
    }
}

@media (min-width: 80em) {
    .navigation-links {
        --item-side-padding: var(--space-5);
    }

    .navigation-links .link-item {
        padding: 18px var(--item-side-padding);
        font-size: 1.375rem;
    }
}