.hero {
    padding: calc(var(--spacing-5xl) + var(--spacing-9xl)) 0 var(--spacing-xl);
}

.hero.dark {
    background-color: var(--noninteractive-background-primary-inverse);
    color: var(--noninteractive-text-secondary);
}

.hero.light {
    background-color: var(--noninteractive-background-primary);
    color: var(--noninteractive-text-primary);
}

.hero-eyebrow-wrapper {
    grid-column: 1 / -1;
    min-height: 58px;
}

.hero-eyebrow01 {
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.hero.light .hero-eyebrow01 .body-sm {
    text-decoration: none;
    color: var(--noninteractive-text-tertiary);
}

.hero.dark .hero-eyebrow01 .body-sm {
    text-decoration: none;
    color: var(--noninteractive-text-tertiary-inverse);
}

.hero.light .hero-eyebrow01 .eyebrow01-divider,
.hero.dark .hero-eyebrow01 .eyebrow01-divider {
    border: 1px solid var(--noninteractive-border-secondary);
    width: 1px;
    height: 14px;
}

.hero-eyebrow02 {
    text-decoration: none;
    color: inherit;
}


.hero-contents-wrapper {
    grid-column: 1 / span 8;
    margin: var(--spacing-7xl) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.hero-tags-wrapper {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-7xl) 0 0;
}

.hero.light .hero-tag {
    text-decoration: none;
    color: var(--noninteractive-text-tertiary);
}

.hero.dark .hero-tag {
    text-decoration: none;
    color: var(--noninteractive-text-tertiary-inverse);
}


@media (max-width: 1024px) {
    .hero {
        padding: calc(70px + var(--spacing-9xl)) 0 var(--spacing-3xl);
    }

    .hero-contents-wrapper {
        grid-column: 1 / -1;
    }

    .hero-tags-wrapper,
    .hero-contents-wrapper {
        margin: var(--spacing-5xl) 0 0;
    }
}

@media (max-width: 767px) {
    .hero {
        padding: calc(70px + var(--spacing-9xl)) 0 var(--spacing-3xl);
    }

    .hero-tags-wrapper,
    .hero-contents-wrapper {
        margin: var(--spacing-6xl) 0 0;
    }
}

/* Hero Alt */
.hero-alt {
    grid-column: 1 / span 8;
    padding: calc(var(--spacing-10xl) + var(--spacing-9xl)) 0 var(--spacing-10xl);
}

@media (max-width: 1024px) {
    .hero-alt {
        grid-column: 1 / -1;
    }
}