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

<section id="reviews-438">
    <div class="cs-container">
        <div class="cs-content">
            <p class="cs-review">
                <img class="cs-quote" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Reviews/quote-left.svg" alt="icona virgolette" width="120" height="106" loading="lazy" decoding="async">
                “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”
            </p>
            <span class="cs-author">Mario Rossi - Cliente di AltoService</span>
        </div>
        <picture class="cs-picture">
            <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Reviews/man-m.jpg">
            <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Reviews/man.jpg">
            <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Reviews/man.jpg" alt="viso di una persona" width="328" height="540">
        </picture>
    </div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-438 {
        width: 91.112%;
        max-width: 34.375rem;
        margin: var(--sectionPadding);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        border-radius: 1.5rem;
        overflow: hidden;
        position: relative;
    }
    #reviews-438:before {
        content: "";
        width: 100%;
        height: 0.5rem;
        background: var(--primaryLight);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        z-index: 10;
    }
    #reviews-438 .cs-container {
        width: 100%;
        margin: auto;
        margin-top: 5.8125rem;
        padding: 0 clamp(1.25rem, 6vw, 6.75rem) clamp(2.5rem, 8vw, 6.25rem);
        border-radius: 1.5rem;
        box-sizing: border-box;
        background-color: #14142b;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        position: relative;
    }
    #reviews-438 .cs-review {
        font-size: clamp(1rem, 2vw, 1.5625rem);
        line-height: 1.5em;
        margin: 0 0 clamp(1.5rem, 3vw, 3rem) 0;
        color: #dad9e3;
        position: relative;
        z-index: 1;
    }
    #reviews-438 .cs-quote {
        width: clamp(2.5rem, 11vw, 7.5rem);
        height: auto;
        display: block;
        position: absolute;
        left: 0;
        top: -3.75rem;
        z-index: -1;
    }
    #reviews-438 .cs-author {
        font-size: clamp(1rem, 2.6vw, 1.9375rem);
        font-weight: 700;
        line-height: 1.2em;
        color: #fafbfc;
    }
    #reviews-438 .cs-picture {
        width: clamp(7.25rem, 24vw, 20.5rem);
        margin-top: -5.8125rem;
        margin-bottom: 2.25rem;
        border-radius: 8.75rem;
        border: clamp(8px, 1vw, 12px) solid #ffffff;
        background-color: #fff;
        box-sizing: content-box;
        overflow: hidden;
        aspect-ratio: 0.65079365;
        display: block;
        order: -1;
        position: relative;
    }
    #reviews-438 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-438 {
        max-width: 80rem;
    }
    #reviews-438 .cs-container {
        padding-top: 6.75rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #reviews-438 .cs-content {
        width: 57%;
    }
    #reviews-438 .cs-review {
        margin-bottom: clamp(3rem, 7vw, 6rem);
    }
    #reviews-438 .cs-quote {
        width: clamp(5rem, 8vw, 7.5rem);
        top: -3.3125rem;
        left: calc(clamp(1.25rem, 2vw, 4rem) * -1);
    }
    #reviews-438 .cs-picture {
        margin: 0;
        order: initial;
        position: absolute;
        top: calc(clamp(3.125rem, 8vw, 6.75rem) * -1);
        right: clamp(3.25rem, 7vw, 6.25rem);
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #reviews-438 .cs-container {
        padding: 6.75rem clamp(3.75rem, 4.6vw + 2rem, 6.75rem)
            clamp(2.5rem, 8vw, 6.25rem);
    }
    #reviews-438 .cs-review {
        margin: 0 0 clamp(3rem, 4.2vw + 2rem, 6rem) 0;
    }
}