/*  COMPONENT: NAV-CTA
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .nav-cta {
    }
    .nav-cta .menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-s);
    }

    .nav-cta a {
        background-color: var(--color-green);
        color: var(--color-green-800);
        font-weight: bold;
        text-decoration: none;
        display: block;
        padding: 0.25rem var(--spacing-m);
        font-size: var(--font-size-m);
        border-radius: 2rem;
    }
    @media (max-width: 720px) {
        .nav-cta a {
            display: grid;
            place-items: center;
            min-height: 40px;
        }
    }
    .nav-cta a:hover {
        background-color: var(--color-green-300);
        color: var(--color-green-900);
    }
}