.ww-30th-testimonial {
    background-color: var(--colors-deep-blue);
    background-image: var(--_background-image);
    background-size: cover;

    overflow: hidden;
    padding-block: 66px 51px;

    @media (min-width: 768px) {
        padding-block: 100px 60px;
    }

    --_background-image: var(--image-background-mobile);

    >.container--full {
        --_container-block-end: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 47px;
        margin-block: 0 var(--_container-block-end);

        @media (min-width: 768px) {
            grid-template-columns: 1fr 1fr;
            gap: 100px;
            align-items: center;
        }

        &:has(+.ww-30th-testimonial__footer) {
            --_container-block-end: 40px;
        }
    }

    @media (min-width: 768px) {
        --_background-image: var(--image-background);
    }
}

.ww-30th-testimonial__quote {
    --_quote-start-postion-x: -15px;
    --_quote-start-postion-y: -15px;

    --_quote-mark-font-size: 40px;
    --_quote-mark-line-height: 50%;

    --_quote-text-font-size: 18px;
    --_quote-text-line-height: 148%;

    --_quote-attribution-font-size: 25px;
    --_quote-attribution-line-height: 100%;

    color: var(--colors-white);

    blockquote {
        margin-inline: 0;
        margin-block: 0 1.5rem;
        padding: 0;
        font-family: var(--fonts-montserrat);

        & p {
            --_item-margin-block-end: 1rem;

            position: relative;
            padding-inline: 0;
            font-size: var(--_quote-text-font-size);
            line-height: var(--_quote-text-line-height);
            margin-block: 0 var(--_item-margin-block-end);
            text-wrap: pretty;

            &::before,
            &::after {                
                font-size: var(--_quote-mark-font-size);
                line-height: var(--_quote-mark-line-height);
                font-weight: bold;
                color: var(--colors-gold);
            }

            &:first-child::before {
                position: absolute;
                top: var(--_quote-start-postion-y);
                left: var(--_quote-start-postion-x);
                content: "\201C";
                vertical-align: top;
            }

            &:last-child {
                --_item-margin-block-end: 0;

                &::after {
                    content: "\201D";

                    vertical-align: bottom;
                    position: relative;
                    top: 20px;
                    left: 1rem;
                }
            }
        }

    }

    blockquote+p {
        font-family: var(--fonts-azo);
        font-size: var(--_quote-attribution-font-size);
        line-height: var(--_quote-attribution-line-height);

        font-weight: bold;
        text-transform: uppercase;

        &::before {
            content: '- ';
        }
        padding-inline: var(--_inline-start-offset) 0;
    }

    @media (min-width: 768px) {
        --_quote-text-font-size: 25px;
        --_quote-text-line-height: 122.7%;

        --_quote-mark-font-size: 55px;
        --_quote-mark-line-height: 50%;

        --_quote-start-postion-x: -40px;
        --_quote-start-postion-y: 0;

        --_quote-attribution-font-size: 35px;
        --_quote-attribution-line-height: 100%;
    }
}


.ww-30th-testimonial__photo {

    photo,
    img {
        display: block;
    }

    img {
        width: 100%;
    }
}

.ww-30th-testimonial__footer {
    display: grid;
}

.ww-30th-testimonial__footer-btn {
    place-self: center;
}