<!-- ============================================ -->
<!--                Recensioni                    -->
<!-- ============================================ -->

<section id="reviews-705">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Testimonianze</span>
            <h2 class="cs-title">Ecco i <span class="cs-color">Feedback</span> dei Nostri Clienti</h2>
        </div>
        <div class="cs-flex-group">
            <div class="cs-image-group">
                <picture class="cs-picture">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FPeople%2Fperson7.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FPeople%2Fperson7.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FPeople%2Fperson7.jpg" alt="persona sorridente" width="570" height="680">
                </picture>

                <img class="cs-flower" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FGraphics%2Fbig-abstract-flower.svg" alt="fiore grafica" width="261" height="130">

                <img class="cs-sense" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FGraphics%2Fspider-sense.svg" alt="" width="80" height="89">
            </div>
            <div class="cs-review-group">
                <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fpink-quote.svg" alt="" width="97" height="80">
                <p class="cs-review-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo totam impedit quaerat omnis 
                    officia. Tempora, error ipsum sequi inventore rerum ab totam assumenda corporis asperiores 
                    sint nulla modi mollitia fugiat. Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Animi sapiente ipsum asperiores quaerat reiciendis odio? Sint atque neque reprehenderit cupiditate.
                </p>
                <span class="cs-name">Maria Rossi</span>
                <span class="cs-job">Studentessa</span>
            </div>
        </div>
    </div>
    <picture class="cs-waves">
        <source media="(max-width: 1023px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FGraphics%2Fripple3-m.svg">
        <source media="(min-width: 1024px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FGraphics%2Fripple3.svg">
        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FGraphics%2Fripple3.svg" alt="" width="566" height="309">
    </picture>
</section>

/*-- -------------------------- -->
<---        Recensioni          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-705 {
        padding: var(--sectionPadding);
        position: relative;
    }
    #reviews-705 .cs-container {
        width: 100%;
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        z-index: 1;
    }
    #reviews-705 .cs-content {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #reviews-705 .cs-title {
        max-width: 26ch;
        margin: 0;
    }
    #reviews-705 .cs-color {
        color: var(--primary);
    }
    #reviews-705 .cs-flex-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }
    #reviews-705 .cs-image-group {
        font-size: min(2.22vw, 0.7em);
        width: 41.0625em;
        height: 42.5em;
        position: relative;
        z-index: -1;
        transform: scaleX(-1);
    }
    #reviews-705 .cs-picture {
        width: 35.625em;
        height: 42.5em;
        border-radius: 17.8125em;
        overflow: hidden;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #reviews-705 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        transform: scaleX(-1);
    }
    #reviews-705 .cs-flower {
        width: 16.6875em;
        height: auto;
        display: block;
        position: absolute;
        bottom: 1.25em;
        right: -3em;
        z-index: -1;
        transform: rotate(115deg);
    }
    #reviews-705 .cs-sense {
        width: 5em;
        height: auto;
        position: absolute;
        top: -0.25em;
        left: 0.25em;
        transform: rotate(90deg);
    }
    #reviews-705 .cs-review-group {
        max-width: 33.8125rem;
    }
    #reviews-705 .cs-icon {
        width: clamp(3.5rem, 7vw, 6rem);
        height: auto;
        margin: 0 0 1.5rem 0;
        display: block;
    }
    #reviews-705 .cs-review-text {
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.5em;
        text-align: left;
        margin: 0 0 1.5rem 0;
        color: var(--bodyTextColor);
    }
    #reviews-705 .cs-name {
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        margin: 0 0 0.5rem 0;
        display: block;
    }
    #reviews-705 .cs-job {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: left;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #reviews-705 .cs-waves {
        width: 55vw;
        max-width: clamp(25rem, 40vw, 35.375rem);
        height: auto;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: calc(clamp(6.25rem, 17vw, 10rem) * -1);
        z-index: -1;
        transform: scaleX(-1);
    }
    #reviews-705 .cs-waves img {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-705 .cs-container {
        max-width: 80rem;
    }
    #reviews-705 .cs-flex-group {
        flex-direction: row;
        justify-content: space-between;
    }
    #reviews-705 .cs-image-group {
        font-size: min(1.18vw, 1em);
        flex: none;
        order: 2;
    }
    #reviews-705 .cs-review-group {
        width: 54%;
    }
}