.testimonial {
    width: 400px;
    background: white;
    border: 5px solid #ffed00;
    padding: 15px;
    overflow: hidden;
}
    .testimonial .photoQuote {
        display: flex;
        align-items: center;
        position: relative;
        padding-bottom: 25px;
    }
        .testimonial .photoQuote::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 100 66" viewBox="0 0 100 66"><path fill="rgb(255, 237, 0)" d="M76.7 21.2c-1.4 0-2.7.1-4.1.4L92.5 2.9l-3-2.9-29.2 27.4-.6.6-.3.3c-3.9 4-6.4 9.3-6.4 15.1-.1 12.4 10.4 22.5 23.4 22.6 13 .1 23.6-9.9 23.6-22.2.1-12.4-10.4-22.5-23.3-22.6zm-53.1 0c-1.4 0-2.7.1-4.1.4l20-18.7-3-2.9L7.3 27.4l-.6.6-.3.3C2.5 32.2 0 37.5 0 43.4-.1 55.8 10.4 65.9 23.3 66c13 .1 23.6-9.9 23.6-22.2.2-12.4-10.3-22.5-23.3-22.6z"/></svg>');
            background-repeat: no-repeat;
            background-size: 50px;
            background-position: bottom left;
        }
        @media (min-width: 768px) {
            .testimonial .photoQuote::after {
                background-size: 65px;
            }
        }
        @media (min-width: 992px) {
            .testimonial .photoQuote::after {
                background-size: 75px;
            }
        }
        @media (min-width: 1200px) {
            .testimonial .photoQuote::after {
                background-size: 85px;
            }
        }
        .testimonial .photoQuote::before {
            content: '';
            position: absolute;
            right: 15%;
            bottom: 0;
            width: 50%;
            height: 5px;
            background-color: #ffed00;
        }
        .testimonial .photoQuote img {
            width: 70px;
            height: 70px;
            border-radius: 999px;
            margin-right: 15px;
        }
        @media (min-width: 768px) {
            .testimonial .photoQuote img {
                width: 110px;
                height: 110px;
            }
        }
        @media (min-width: 992px) {
            .testimonial .photoQuote img {
                width: 135px;
                height: 135px;
            }
        }
        @media (min-width: 1200px) {
            .testimonial .photoQuote img {
                width: 150px;
                height: 150px;
            }
        }
        .testimonial .photoQuote q {
            font-family: "FontFaceBold", sans-serif;
            font-size: 18px;
            line-height: 1.1;
        }
        @media (min-width: 768px) {
            .testimonial .photoQuote q {
                font-size: 19px;
            }
        }
        @media (min-width: 992px) {
            .testimonial .photoQuote q {
                font-size: 20px;
            }
        }
        @media (min-width: 1200px) {
            .testimonial .photoQuote q {
                font-size: 21px;
            }
        }
            .testimonial .photoQuote q::before,
            .testimonial .photoQuote q::after {
                content: '';
            }
        .testimonial .nameRole {
            margin: 15px 0;
        }
            .testimonial .nameRole p {
                font-size: 13px;
            }
            @media (min-width: 768px) {
                .testimonial .nameRole p {
                    font-size: 14px;
                }
            }
            @media (min-width: 992px) {
                .testimonial .nameRole p {
                    font-size: 15px;
                }
            }
            @media (min-width: 1200px) {
                .testimonial .nameRole p {
                    font-size: 16px;
                }
            }
            .testimonial .nameRole p:first-child {
                font-family: "FontFaceBold", sans-serif;
                margin: 0;
            }
            .testimonial .nameRole p:last-child {
                margin: 0 0 15px 0;
            }
        .testimonial .button {
            padding: 0 0 20px 0;
            display: flex;
            justify-content: right;
        }
            .testimonial .button a {
                font-family: "FontFaceBold", sans-serif;
                display: flex;
                align-items: center;
                font-size: 11px;
                text-decoration: none;
                text-transform: uppercase;
                padding: 4px 8px 3px 8px;
                background: #ffed00;
            }
            @media (min-width: 768px) {
                .testimonial .button a {
                    font-size: 12px;
                }
            }
            @media (min-width: 992px) {
                .testimonial .button a {
                    font-size: 13px;
                }
            }
            @media (min-width: 1200px) {
                .testimonial .button a {
                    font-size: 14px;
                }
            }
                .testimonial .button a::before {
                    display: block;
                    padding-top: 1px;
                    padding-right: 5px;
                    height: 100%;
                    content: '>';
                    font-size: 75%;
                    color: white;
                }
        .testimonial .image {
            position: relative;
        }
            .testimonial .image img {
                width: calc(100% + 40px);
                margin: 0 -20px -20px -20px;
                aspect-ratio: 10 / 6;
                object-fit: cover;
                object-position: center;
            }