.call-to-action {
	--title-color: var(--white-fa);
	--subtitle-color: var(--gray-100);
    --icon-color: var(--gray-100);
    --title-font-family: var(--font-archivo-cond-semibold);
    --subtitle-font-family: var(--font-body);
}

.call-to-action .inner {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-5);
}

.call-to-action .icon {
    color: var(--icon-color);
    font-size: var(--text-2xl);
}

.call-to-action .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.call-to-action .title {
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-family: var(--title-font-family);
    color: var(--title-color);
    font-size: 1.375rem;
    line-height: 1;
    font-weight: 600;
    transition: color var(--transition-appendix);
}

.call-to-action .title svg {
    height: 22px;
    width: 20px;
}

.call-to-action .subtitle {
    font-family: var(--subtitle-font-family);
    color: var(--subtitle-color);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
}

.call-to-action .read-more {
    font-size: var(--text-xs);
}

@media (hover: hover) {
    .call-to-action a:hover .title {
        color: var(--orange-ed);
    }
}

@media screen and (min-width: 64em) {
    .call-to-action .inner {
        padding: 35px 20px;
    }

    .call-to-action .title {
        font-size: 1.45rem;
    }

    .call-to-action .title svg {
        height: 24px;
        width: 26px;
    }

    .call-to-action .subtitle {
        font-size: var(--text-xl);
    }

    .call-to-action .read-more {
        font-size: var(--text-sm);
    }
}

@media screen and (min-width: 90em) {
    .call-to-action .title {
        font-size: 1.875rem;
    }
}