.testimonials {
    display: flex;
    flex-direction: column;
    font-size: clamp(1.125rem, 0.9vw + 0.6rem, 1.25rem);
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;
}

.testimonials > div {
    display: flex;
    flex-direction: row;
    gap: calc(60 / 860 * 100vw);
    width: 100vw;
    max-width: 860px;
    padding: 120px 0 0 0;
}

.testimonials > div img.decorative { display: none; }

.testimonials > div:first-child { padding-top: 40px; }

.testimonials > div:nth-child(even) {
    flex-direction: row-reverse;
    .quote { padding-left: 20px; padding-right: 0; }
}

.testimonials > div:nth-child(even) img.decorative {
    display: block;
    position: absolute;
    top: -62px; left: -50px;
    width: 100px;
}

.testimonials > div > .portrait {
    flex: 0 0 calc(33.33vw - (0.5 * 60 / 860 * 100vw));
    max-width: 257px;
    position: relative;
}

.testimonials > div > .portrait > img {
    width: 100%;
}

.testimonials > div > .quote {
    flex: 0 0 calc(66.67vw - (0.5 * 60 / 860 * 100vw));
    max-width: 542px;
    padding-right: 20px; padding-left: 0;
}

.testimonials > div > .quote h2 {
    font-size: clamp(1.25rem, 0.9vw + 0.6rem, 1.75rem);
    white-space: normal;
    margin-top: 0;
}

.testimonials > div > .quote cite {
    font-style: normal;
    font-weight: 500;
}

.testimonials > div:last-child {
    padding-bottom: 120px;
}

.testimonials > div > .quote > p {
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

@media (min-width: 860px) {
    .quote { padding-left: 0; padding-right: 0; }
}

@media (max-width: 600px) {
    .testimonials > div > .quote { flex: 0 0 calc(60vw - (0.5 * 60 / 860 * 100vw)); }
    .testimonials > div > .portrait { flex: 0 0 calc(40vw - (0.5 * 60 / 860 * 100vw)); }
}

@media (max-width: 400px) {
    .testimonials > div { flex-direction: column; padding-top: 60px; }
    .testimonials > div:nth-child(even) { flex-direction: column; }
    .testimonials > div > .quote { flex: 0 0 auto; padding: 0 20px; }
    .testimonials > div > .portrait { flex: 0 0 auto; }

    .testimonials > div:nth-child(even) img.decorative {
        transform: scaleX(-1);
        top: -62px; left: 208px;
        width: 100px;
    }
}