.kb-reviews {
    display: flex;
    overflow:hidden;
    padding-bottom: 1rem;
    font-family:soleil, sans-serif;
    --active: 1;
    padding-top:80px;
    padding-bottom:80px;
}
.kb-reviews::before, .kb-reviews::after {
    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:80px;
    height:80px;
}
.kb-reviews::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-reviews::after{
    bottom:120px;
    right:0;
    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="M16.9,37.22H0L9.77,0h19Zm28.24,0H28.25L38,0H57Z" fill="%2337fdbe"></path></g></g></svg>');
}

.kb-reviews__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-reviews__card_src {
    display:grid;
    grid-template:"logo name" auto "logo stars" auto "logo date" auto / auto 1fr;
    column-gap:24px;
    row-gap:8px;
}
.kb-reviews__card_src p {
    margin:0;
}

.kb-reviews__card_logo,
.kb-reviews__card_initial {
    grid-area:logo;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* margin-top: -60px; */
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
}

.kb-reviews__card_logo--facebook,
.kb-reviews__card_logo--yell {
    width: 56px;
    height: 56px;
    margin-top: -48px;
}

.kb-reviews__card_initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.kb-reviews__card_stars {
    grid-area:stars;
    color:#fabb05;font-size:1.2rem;
}
.kb-reviews__card_name {
    grid-area:name;
    font-size:20px;
}
.kb-reviews__card_date {
    grid-area:date;
    font-size:16px;
}

.kb-reviews__card_rec {
    grid-area: stars;
    color: #1877f2;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.2rem 0;
}

.kb-reviews__card blockquote {
    transition: all 0.3s ease;
    margin-bottom: 0.25rem;
    font-size:32px;
    line-height:44px;
    font-style:italic;
    font-weight:400;
}

.kb-reviews__card blockquote.expanded {
    -webkit-line-clamp: unset;
}

.kb-reviews__card .read-more {
    color: #0073aa;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-block;
    margin-top: 0.15rem;
}

@media (min-width:768px){
    .kb-quotes {
        padding-top:140px;
        padding-bottom:140px;
    }
    .kb-quotes::before {
        width:140px;
        height:140px;
    }
}