.call-to-action {
	--title-color: var(--deep-blue);
	--subtitle-color: var(--deep-blue);
    --icon-color: var(--gray-100);
    --title-font-family: var(--font-display);
    --subtitle-font-family: var(--font-display-alt);

    background-color: var(--gold);
    overflow: hidden;
}

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

.call-to-action .icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
    aspect-ratio: 2 / 1;
    height: auto;
    width: 132px;
}
.call-to-action .icon img {
    width: 37px;
    margin-bottom: var(--space-2);
    position: relative;
    z-index: 1;
}

.call-to-action .icon::after {
    content: "";
    background-image: url(/includes/public/assets/shared/cta-icon-bg.svg);
    background-size: contain;
    position: absolute;
    bottom: -88%;
    width: 100%;
    height: 200%;
    transition: transform 200ms ease-out;
}

.call-to-action .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) 0;
}

.call-to-action .title {
    font-family: var(--title-font-family);
    color: var(--title-color);
    font-size: 1.375rem;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
}

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

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

@media screen and (min-width: 64em) {
    .call-to-action  {
        padding: 31px calc(25px + (105 - 25) * ((100vw - 1024px) / (1440 - 1024))) 0 20px;
        height: 100%;
    }

    .call-to-action .inner {
        gap: 25px;
    }

    .call-to-action .icon {
        position: relative;
        height: auto;
        width: 202px;
    }
        
    .call-to-action .icon::after {
        bottom: -95%;
    }

    .call-to-action .icon img {
        width: 52px;
        transition: transform var(--transition-appendix);
    }

    .call-to-action:hover .icon img {
        transform: translateY(-10px);
    }
    .call-to-action .icon img.vguide {
        width: 57px;
    }
    .call-to-action:hover .icon::after {
        transform: translateY(-15.43px) rotate(14deg)
    }
    .call-to-action .content {
        padding: var(--space-4) 0 var(--space-8);
    }
    .call-to-action .title {
        font-size: var(--text-3xl);
    }

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

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

    .call-to-action:hover .read-more {
        transform: translateX(3px);
    }

}

@media screen and (min-width: 90em) {
    .call-to-action  {
        padding: 31px 105px 0 20px;
    }

}