.testimonials:has(article:nth-child(2)) { display: flex; gap: var(--gutter_big); flex-wrap: wrap; }

.testimonials article { width: calc(50% - (var(--gutter_big) / 2)); }

@media all and (min-width: 600px) {
    .testimonials article:first-child:last-child,
    .testimonials article:not(:first-child):nth-child(3n) {
        width: 100%;
        display: flex
    }
}
.testimonials {
    --card-padding:40px;
    --logo-height:40px;
    --headshot:120px; margin: var(--gutter_big) 0;
}
.testimonials article {
    background: var(--ttl_blue); color: var(--ttl_black);
    border-radius: var(--radius);
    display: block; overflow: hidden;

    display: flex;
    flex-direction: column;

}
.testimonials article blockquote {
    display: flex;
    flex-direction: column;

    flex: 1;
}

    .testimonials article blockquote>div {
    display: flex;   flex-direction: column;
    flex: 1;
    font-family: proxima-sera, serif;
    font-size: 28px;
    line-height: 1.5;
}
.testimonials article blockquote .icon { display: block;
    font-family: ttl_icons; font-style: normal !important; font-weight: 400; margin-bottom: 8px;
    font-size: 32px; line-height: 1;

}
.testimonials article blockquote .icon::after {
    content:"\E80c";
}
.testimonials article :is(blockquote>div,.attribution) {
    padding:var(--card-padding);
}
.testimonials article :is(.attribution) {
    padding:var(--card-padding); margin-top: auto;
}
.testimonials article .attribution{
    background: var(--ttl_black); color:white;
    position: relative;
    display: flex; flex-direction: column;
}


.testimonials article .cta { /*margin-top: 24px;*/ background: var(--ttl_black); padding:0 var(--card-padding) var(--card-padding); }
.testimonials article .cta a { background: white; color:black;  }
.testimonials article .cta a:is(:hover,:focus-visible) { background: var(--ttl_blue); color:black;  }


.testimonials:has(article:nth-child(2)) article:not(:nth-child(3n)) {


}


@media all and (min-width: 600px) {
    .testimonials:has(article:nth-child(2)) article:not(:nth-child(3n)):not(:first-child:last-child) blockquote>div{
    padding-bottom: calc(var(--card-padding) + var(--logo-height) / 2); flex: 1;
    }
    .testimonials:has(article:nth-child(2)) article:not(:nth-child(3n)):not(:first-child:last-child):has(.client_logo) .attribution{
        padding-top: calc(var(--card-padding) + var(--logo-height) / 2);
    }


    .testimonials article:first-child:last-child .client_logo ,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n) .client_logo {
        height: calc(var(--logo-height) * 1.5) !important;  margin-top:var(--card-padding) ;
    }
    .testimonials article:first-child:last-child .person picture ,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n) .person picture {
        margin-bottom:var(--bodytext_size) ;
    }
    .testimonials article:first-child:last-child .client_logo picture ,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n) .client_logo picture {
        transform: none !important;
        

    }


    .testimonials:has(article:nth-child(2)) article:not(:nth-child(3n)):not(:first-child:last-child) .client_logo{
        order:-1;
        position: absolute;  top: 0; left: var(--card-padding);
    }
    /* target odd (not only) children */
    .testimonials article:only-child .attribution,
    .testimonials article:first-child:last-child .attribution,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) .attribution {

        width: calc(50%); margin-top: 0;
    }

    .testimonials article:first-child:last-child blockquote ,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) blockquote {
        display: flex; flex-direction: row;
    }

    .testimonials article:first-child:last-child p.cta ,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) p.cta {
        width: calc(50%);
        margin-left: auto;

    }
}

@media all and (min-width: 1200px) {
    .testimonials article:first-child:last-child p.cta,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) p.cta,
    .testimonials article:only-child .attribution,
    .testimonials article:first-child:last-child .attribution,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) .attribution {
        width: calc(33.333%);
    }

}

@media all and (min-width: 600px) {
    .testimonials article:only-child .person,
    .testimonials article:first-child:last-child .person ,
    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) .person {
        display: block;
    }

}


.testimonials .person { font-size: 22px; line-height: 1.5; display: flex; align-items: center; gap:20px }
.testimonials .person :is(strong,cite) { font-weight: 700; }
.testimonials .person picture{ width: var(--headshot); height: var(--headshot); min-width: var(--headshot); border-radius: 50%; overflow: hidden;}



@media all and (max-width: 1199.98px) {
    .testimonials {
        --card-padding: 24px;
    }
}

@media all and (max-width: 899.98px) {
    .testimonials {
        --card-padding: 24px;
        --logo-height: 32px;
        --headshot:80px;
    }

/*    .testimonials:has(article:nth-child(2)) article:nth-child(odd):not(:first-child) .attribution {
        width: calc(50%);
    }*/

    .testimonials article blockquote>div {

        font-size: 22px;

    }
    .testimonials .person {
        font-size: 18px;
    }

}

@media all and (max-width: 599.98px) {
    .testimonials {
        --card-padding:16px;

    }

    .testimonials article {

        width: 100%;
    }

    .testimonials article blockquote>div {

        font-size: 18px;

    }

    .testimonials:has(article:nth-child(2)) article:nth-child(3n):not(:first-child) .attribution {
        width: 100%;
    }


}

.testimonials article .client_logo {  height: 0 !important; margin-bottom: calc(var(--logo-height) / 2); position: relative; padding-left: 0; }
.testimonials article .client_logo picture {  border: 1px solid var(--ttl_black); background: white; border-radius: 8px; padding: calc(var(--logo-height) / 4);
    position: absolute; top: 0; transform: translateY(-50%);
}
.testimonials article .client_logo picture img { height: var(--logo-height); width: auto; display: block;}

@media all and (max-width: 899.98px) {
    .testimonials .person  { display: block; }
    .testimonials .person picture  { margin-bottom: 8px; }
}
@media all and (max-width: 599.98px) {
    .testimonials article .client_logo{
        order:-1;
        position: absolute;  top: 0; left: var(--card-padding);

    }


    .testimonials article blockquote>div{
        padding-bottom: calc(var(--card-padding) + var(--logo-height) / 2) !important;

    }
    .testimonials article .attribution{
        position: relative;
        padding-top: calc(var(--card-padding) + var(--logo-height) / 2) !important;
    }
}