/* not scoped, but contained in .testimonials */
    .testimonials {
        padding-top: 5vh;
    }

    .testimonials > div > div {
        display: flex;
        flex-wrap: wrap;
        gap: 3rem;
        align-items: stretch;
    }

    .testimonials .testimonial {
        position: relative;
        overflow: hidden;
        flex: 1 1 0;
        min-width: 250px;
        max-width: 100%;
        padding: 1em;
        background-repeat:repeat;
        border-radius: 12px;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    }

    .testimonials .testimonial.large {
        flex: 2 1 0;
    }

    .testimonials .testimonial.xlarge {
        flex: 3 1 0;
        min-width: 32%
    }

    .testimonials .testimonial.xxlarge {
        flex: 3 1 0;
        min-width: 50%;
    }

    .testimonial h3 {
        font-size: clamp(1.5em, 2rem, 16px);
        color: var(--color-text-light);
        text-shadow: 0 2px 4px rgba(0,0,0,0.22);
    }

    .testimonial strong {
        color: var(--vp-c-text-light);
        text-shadow: 0 2px 4px rgba(0,0,0,0.22);
    }

    .testimonial > p {
        color: var(--color-text-light);
        font-size: 1.2em;
        text-shadow: 0 2px 2px rgba(0,0,0,0.22);
    }

    .testimonial blockquote {
        color: var(--color-text-dark);
    }

    .testimonial.brass {
        background-color: rgba(255, 166, 0, 0.363);
        background-image: url(/images/textures/pink-stone-texture.png);
        background-blend-mode:screen;
        h3, strong {
            color: var(--color-amethyst);
        }
    }

    .testimonial.bronze {
        background-color: var(--color-ruby);
        background-image: url(/images/textures/orange-stone-texture.png);
        background-blend-mode:screen;
        h3, strong {
            color: var(--color-brand-blue);
        }
    }

    .testimonial.copper {
        background-color: var(--color-copper);
        background-image: url(/images/textures/red-stone-texture.png);
        background-blend-mode:screen;
        h3, strong {
            color: var(--color-saphire);
        }
        em {
            color: var(--color-brand-blue);
        }
    }

    .testimonial.gold {
        background-color: var(--color-gold);
        background-image: url(/images/textures/brown-stone-texture.png);
        background-blend-mode:screen;
        p {
            color: dimgray;
        }
        h3, strong {
            color: var(--color-blue-jeans);
        }
        em {
            color: var(--color-blue-jeans);
        }
    }

     .testimonial.blue {
        background-color: var(--color-saphire);
        background-image: url(/images/textures/sage-green-texture.jpg);
        background-blend-mode:screen;
        h3, strong {
            color: var(--color-gold);
        }
    }

    .testimonial.green {
        background-color: var(--color-emerald);
        background-image: url(/images/textures/sage-green-texture.jpg);
        background-blend-mode:screen;
        h3, strong {
            color: var(--color-gold);
        }
        em {
            color: lightyellow;
        }
    }
        
    .testimonials .testimonial::before {
        content: '';
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        backdrop-filter: blur(10px);
        z-index: 1;
    }

    .testimonials .testimonial > * {
        position: relative;
        z-index: 1;
    }

   .testimonial em + em::before {
        content: "\A";
        white-space: pre;
    }

    .testimonial blockquote::before {
        position:absolute;
        left: -.5em;
        top: -.4em;
        content: "“";
        text-align: left;
        font-size: clamp(6em, 6em, 18px);
        z-index: 2;
    }

    .testimonial blockquote::after {
        position: absolute;
        right: -.2em;
        bottom: -.7em;
        content: "”";
        
        
        font-size: clamp(6em, 6em, 18px);
        z-index: 2;
    }

    .testimonial p:has(img) {
        float: right;
    }

    .testimonial img {
        border-radius: 12px;
        display:block !important;
    }

    .cta-testimonials {
        margin-top: 4vh;
        max-width: fit-content;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    }

    @media (prefers-color-scheme: dark) {
        .testimonial, .testimonial p, .testimonial.copper, .testimonial.bronze, .testimonial.brass, .testimonial.gold,
        .testimonial.green, .testimonial.blue, .testimonial.large, .testimonial.xlarge, .testimonial.xxlarge {
            background-color: slateblue !important;
            background-image: none !important;
            background-blend-mode: normal !important;
            color: #d3d3d3 !important;
        }
        .testimonial h3, .testimonial.copper h3, .testimonial.bronze h3, .testimonial.brass h3,
        .testimonial.gold h3, .testimonial.green h3, .testimonial.blue h3,
        .testimonial strong, .testimonial.copper strong, .testimonial.bronze strong, .testimonial.brass strong,
        .testimonial.gold strong, .testimonial.green strong, .testimonial.blue strong,
        .testimonial.large strong, .testimonial.xlarge strong, .testimonial.xxlarge strong,
        .testimonial em, .testimonial.copper em, .testimonial.bronze em, .testimonial.brass em,
        .testimonial.gold em, .testimonial.green em, .testimonial.blue em,
        .testimonial.large em, .testimonial.xlarge em, .testimonial.xxlarge em
        {
            color: white !important;
        }
        .testimonial blockquote, .testimonial.copper blockquote, .testimonial.bronze blockquote,
        .testimonial.brass blockquote, .testimonial.gold blockquote, .testimonial.green blockquote,
        .testimonial.blue blockquote
        {
            color: #d3d3d3 !important;
        }
        .testimonial blockquote::before, .testimonial blockquote::after {
            color: gold !important;
        }
    }