.cta{
    display: flex;
    gap: var(--sp-lg);
    justify-content: center;
    align-items: center;
    max-width: var(--br-xl);
    margin: 0 auto;
}

.cta-default{
    padding: var(--sp-md);
    border-radius: var(--radius-xl);
    border: var(--width-1) solid var(--border-soft);
    background-color: var(--surface-brand-soft);
}

.cta .cta-detail{
    flex: 0 0 calc(35% - var(--sp-lg));
    flex-grow: 1;
    align-items: start;
}

.cta-detail .cta-logo{
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.cta-detail .cta-logo .media{
    height: 40px;
}

.cta-detail .cta-logo .media-thumbnail{
    border-radius: 0;
}

.cta-detail .cta-logo .media-thumbnail .img{
    border-radius: 0;
    object-fit: contain;
}

.cta-card-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    flex: 0 0 calc(65% - var(--sp-lg));
}

.cta-card-wrapper:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 134px;
    background: linear-gradient(
        to right,
        var(--surface-brand-soft) 0%,
        transparent 100%
    );
    z-index: 1;
}

.cta-card-wrapper:after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 34px;
    background: linear-gradient(
        to left,
        var(--surface-brand-soft) 0%,
        transparent 100%
    );
    z-index: 1;
}

.cta-card-marquee {
    display: flex;
    width: max-content;
    animation: marquee-scroll 55s linear infinite;
	gap: var(--sp-md);
}

.cta-card-list {
    display: flex;
    gap: var(--sp-md);
}

.cta-card-list .card {
    max-width: 375px;
}

.cta-detail .cta-cta{
    width: 100%;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.cta-card-wrapper:hover .cta-card-marquee {
    animation-play-state: paused;
}

@media (max-width: 991px){
    .cta{
        flex-direction: column;
    }
}