.kb-quotes {
    display: flex;
    overflow:hidden;
    padding-bottom: 1rem;
    font-family:soleil, sans-serif;
    --active: 1;
    padding-top:60px;
}
.kb-quotes::before {
    content:'';
    display:block;
    position:absolute;
    /*background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ny4wMiAzNy4yMiI+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBkPSJNMTEuODgsMGgxNi45TDE5LDM3LjIySDBaTTQwLjEzLDBINTdMNDcuMjYsMzcuMjJoLTE5WiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");*/
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    width:72px;
    height:72px;
}
.kb-quotes::before{
    top:0;
    left:0;
    /*background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ny4wMiAzNy4yMiI+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBkPSJNMTEuODgsMGgxNi45TDE5LDM3LjIySDBaTTQwLjEzLDBINTdMNDcuMjYsMzcuMjJoLTE5WiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");*/
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.02 37.22"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M11.88,0h16.9L19,37.22H0ZM40.13,0H57L47.26,37.22h-19Z" fill="%2337fdbe"></path></g></g></svg>')
}

.kb-quotes__card {
    display:flex;
    flex-direction:column;
    gap:24px;
    flex:1 0 100%;
    position: relative;
    padding: 1.5rem;
    text-align: left;
    transition:transform ease-in-out .6s .4s, opacity ease-in-out .6s;
    transform:translateX(calc((var(--active) - 1) * -100%));
    opacity: calc(var(--active) + 1 - sibling-index());
    /*opacity: progress(calc(var(--active) + 1), sibling-index(), sibling-count());*/
}

.kb-quotes__card blockquote {
    transition: all 0.3s ease;
    margin-bottom: 0.25rem;
    font-size:clamp(32px, 7vw, 72px);
    line-height:110%;
    font-weight:400;
    text-wrap:pretty;
}
.kb-quotes__card blockquote p {
    font-size:inherit;
    line-height:inherit;
}
@media (min-width:768px){
    .kb-quotes {
        padding-top:80px;
    }
    .kb-quotes::before {
        width:100px;
        height:100px;
    }
    .kb-quotes__card blockquote {line-height:100%;}
}