.component-cta {
    display: inline-block;
    padding-inline: var(--cta-padding-inline, 1.25rem);

    border: var(--cta-border-width, .063rem) solid var(--cta-bgcol);
    border-radius: calc((var(--cta-height, 2.75rem) + var(--cta-border-width, .063rem)) / 2);
    background-color: var(--cta-bgcol);

    line-height: var(--cta-height, 2.75rem);
    color: var(--cta-color);

    transition: color var(--transition-time, .2s), background-color var(--transition-time, .2s), border-color var(--transition-time, .2s);
}

.component-cta:hover {
    background-color: transparent;
}

a.component-cta {
    width: fit-content;

    font-weight: 600;
    font-size: .75rem;

    border-width: .125rem;
}

.component-cta--white-bg {
    --cta-bgcol: var(--white);
    --cta-color: var(--text);
}

a.component-cta--white-bg:hover {
    background-color: var(--text);
    border-color: var(--text);
    color: var(--white);
}

@media screen and (min-width: 64rem) {

    a.component-cta {
        font-size: .785rem;
    }
    
}