.call-to-action {
	--title-color: var(--purple-deep);
	--subtitle-color: var(--gray-100);
    --icon-color: var(--white);
    --title-font-size: var(--text-lg);
    --icon-font-size: var(--text-2xl);
}

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

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

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

.call-to-action .title {
    display: inline;
    white-space: nowrap;
    font-family: var(--font-display);
    color: var(--title-color);
    font-size: var(--title-font-size);
    line-height: 1.2;
    font-weight: var(--font-weight-semibold);
    vertical-align: top;
}

.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 {
    padding-left: 10px;
    font-size: var(--text-base);
    color: var(--white);
}


.panel-intro-5 .cta-cont {
    background: url('../png/cta_bg_texture_purple_2d867f8d-385f-4237-b495-07982e176a3e.png') no-repeat;
    background-size: cover;
    padding-block: 20px;
    background-position: bottom;
}

/* transition */
.panel-footer .call-to-action .inner,
.panel-intro-5 .call-to-action .inner {
    transition: gap 0.4s ease;
}
.panel-footer .call-to-action .inner .read-more,
.panel-intro-5 .call-to-action .inner .read-more {
    transition: padding-left 0.4s ease;
}
.panel-footer .call-to-action .inner .title,
.panel-intro-5 .call-to-action .inner .title {
    transition: color 0.4s ease;
}

@media (hover:hover) {
    .panel-footer .call-to-action:hover .inner,
    .panel-intro-5 .call-to-action:hover .inner {
        gap: var(--space-6);
        & .title {
            color: var(--green);
            & .read-more {
                padding-left: 14px;
            }
        }

    }
    .panel-footer .call-to-action:hover .inner .title {
        color: var(--purple);
    }
}

@media (min-width: 64em) {
    .call-to-action {
        --title-font-size: var(--text-2xl);
        --icon-font-size: var(--text-3xl);
    }

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

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