image and text change

<style>
        .review-press {
                background: #f3f3f3;
                padding: 60px 20px;
                text-align: center;
                font-family: Arial, sans-serif;
        }

        .review-press .quote {
                max-width: 900px;
                margin: 0 auto 40px;
                font-size: 24px;
                line-height: 1.4;
                color: #222;
                position: relative;
        }

        .review-press .quote:before,
        .review-press .quote:after {
                content: "“";
                font-size: 50px;
                color: #bdbdbd;
                position: absolute;
        }

        .review-press .quote:before {
                left: -30px;
                top: -20px;
        }

        .review-press .quote:after {
                content: "”";
                right: -30px;
                bottom: -20px;
        }

        .press-logos {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 40px;
                flex-wrap: wrap;
        }

        .press-logos img {
                max-height: 50px;
                cursor: pointer;
                opacity: 0.6;
                transition: opacity 0.3s ease;
        }

        .press-logos img.active,
        .press-logos img:hover {
                opacity: 1;
        }

        @media (max-width: 768px) {
                .review-press {
                        padding: 40px 15px;
                }

                .review-press .quote {
                        font-size: 18px;
                }

                .press-logos img {
                        max-height: 40px;
                }
        }
</style>

<div class="review-press">
        <div id="pressQuote" class="quote">
                …this wallet is exceptional and is perhaps one of the most sustainable we've found
        </div>

        <div class="press-logos">
                <img src="{{ 'https://cdn.shopify.com/s/files/1/0749/3877/7799/files/amp-1637148832115-GQlogo_180x_649eca07-005f-46f4-b199-3f41c710b022.avif?v=1766056962' | asset_url }}"
                        alt="GQ" class="active"
                        onclick="changeQuote(this, '…this wallet is exceptional and is perhaps one of the most sustainable weve found.')" />

                <img src="{{ 'https://cdn.shopify.com/s/files/1/0749/3877/7799/files/amp-1637148832115-GQlogo_180x_649eca07-005f-46f4-b199-3f41c710b022.avif?v=1766056962' | asset_url }}"
                        alt="Indy Best"
                        onclick="changeQuote(this, 'A brilliant combination of design, durability, and sustainability.')" />

                <img src="{{ 'https://cdn.shopify.com/s/files/1/0749/3877/7799/files/amp-1637148832115-GQlogo_180x_649eca07-005f-46f4-b199-3f41c710b022.avif?v=1766056962' | asset_url }}"
                        alt="PETA"
                        onclick="changeQuote(this, 'Award-winning ethical design that proves sustainability can be stylish.')" />
        </div>
</div>

<script>
        function changeQuote(el, text) {
                document.getElementById("pressQuote").innerText = text;

                document.querySelectorAll(".press-logos img").forEach(img => {
                        img.classList.remove("active");
                });

                el.classList.add("active");
        }
</script>