.call-to-action {
	--title-color: var(--teal);
	--subtitle-color: var(--gray-100);
    --icon-color: var(--gray-100);
    --title-font-family: var(--font-burford-inline);
    --subtitle-font-family: var(--font-body);

    width: 292px;
    height: 52px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transition: color ease-out 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-to-action a {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 50px;
}

.call-to-action::before,
.call-to-action::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    content: '';
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    transition: opacity var(--transition);
}

.call-to-action::before {
    background-image: url('/includes/public/assets/shared/footer-button-outline.svg');
    opacity: 1;
}

.call-to-action::after {
    background-image: url('/includes/public/assets/shared/footer-button-filled.svg');
    opacity: 0;
}

.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 .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.call-to-action .title {
    font-family: var(--title-font-family);
    font-weight: var(--font-weight-normal);
    color: var(--title-color);
    font-size: 2.063rem;
    line-height: var(--leading-tight);
    letter-spacing: -0.113rem;
    transition: color ease-out 0.3s;
}
[data-sitename="satpid"] .call-to-action .title {
    font-family: var(--title-font-family);
    font-weight: var(--font-weight-normal);
    color: var(--satpid-nav-blue);
    font-size: 2.063rem;
    line-height: var(--leading-tight);
    letter-spacing: -0.113rem;
    transition: color ease-out 0.3s;
}

.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,
    .call-to-action:hover .title {
        color: var(--white);
        text-decoration: none;
        z-index: 2;
    }

    .call-to-action:hover::before {
        opacity: 0;
    }
    
    .call-to-action:hover::after {
        opacity: 1;
    }
}

@media(min-width: 64em) {
    .call-to-action {
        width: 350px;
        height: 60px;
    }

    [data-sitename="riverwalk"] .call-to-action {
        width: 355px;
        height: 65px;
    }

    .call-to-action .title {
        font-size: 2.375rem;
        letter-spacing: -0.131rem;
    }
}