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

<section id="reviews-1894">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Testimonianze</span>
            <h2 class="cs-title">La Recensione dei Nostri Clienti</h2>
        </div>
        <div class="cs-wrapper">
            <div class="cs-image-group">
                <picture class="cs-picture">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/derm-lady.jpeg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/derm-lady.jpeg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/derm-lady.jpeg" alt="cliente profilo" width="312" height="411">
                </picture>
                <img class="cs-graphic cs-brown" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/brown-lines2.svg" alt="" width="131" height="99">
                <img class="cs-graphic cs-peach" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/peach-blob.svg" alt="" width="55" height="41">
                <img class="cs-graphic cs-beige" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/beige-blob.svg" alt="" width="300" height="312">
                <img class="cs-graphic cs-leaf" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/leaf2.svg" alt="" width="178" height="223">
                <img class="cs-graphic cs-dots" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/beige-dots.svg" alt="" width="207" height="115">
                <img class="cs-graphic cs-lines" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/beige-lines.svg" alt="" width="195" height="215">
            </div>
            <div class="cs-item">
                <div class="wrapper">
                    <img class="cs-item-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/gold-stars-alt.svg" alt="stelle icona" width="111" height="21">
                    <p class="cs-review">
                        Volevo scrivere una recensione sincera su come sono stata trattata quando 
                        sono andata a visitare la dottoressa Rossi. All’inizio ero molto scettica, 
                        perché stavo affrontando alcune difficoltà ed ero nervosa, dato che non 
                        avevo mai fatto trattamenti al viso. Ma con mia sorpresa, fin dal primo 
                        momento, incontrandola e parlando delle mie preoccupazioni, mi sono sentita 
                        subito a casa. La dottoressa Rossi si è presa tutto il tempo necessario 
                        per spiegarmi il processo e ha fatto un lavoro meraviglioso! Non riesco a 
                        credere a quanto sia stato tutto semplice, per non parlare dei risultati. 
                        Sono davvero stupita da quanto la mia pelle sia liscia e luminosa, 
                        senza contare i complimenti che sto ricevendo. Questo era solo il primo 
                        trattamento e ho già notato una differenza enorme. Tornerò sicuramente 
                        presto e non posso esprimere abbastanza quanto sia una dermatologa straordinaria. 
                        Senza dubbio una delle migliori, e grazie dottoressa Rossi per la tua magia!!!
                    </p>
                </div>
                <div class="cs-flex-group">
                    <span class="cs-name">
                        Maria Rossi
                        <span class="cs-job">Studentessa</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <img class="cs-flower" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/banner-flower.svg" alt="" loading="lazy" decoding="async" height="143" width="235">
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1894 {
    padding: var(--sectionPadding);
    background-color: #FAF6F2;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #reviews-1894 .cs-container {
    width: 100%;
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-1894 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #reviews-1894 .cs-topper {
    color: var(--secondary);
  }
  #reviews-1894 .cs-title {
    margin: 0;
  }
  #reviews-1894 .cs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 3.75rem);
  }
  #reviews-1894 .cs-image-group {
    font-size: min(3.02vw, 1rem);
    width: 30.125em;
    height: 35.6875em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #reviews-1894 .cs-picture {
    width: 25.8125em;
    box-sizing: border-box;
    background-color: #DAB692;
    overflow: hidden;
    border: 8px solid #DAB692;
    border-radius: 16.25rem;
    position: absolute;
    top: 1em;
    left: 0;
    bottom: 0.6875em;
    z-index: -1;
  }
  #reviews-1894 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.7s;
  }
  #reviews-1894 .cs-graphic {
    height: auto;
    position: absolute;
  }
  #reviews-1894 .cs-brown {
    width: 10.3125em;
    height: auto;
    top: 1.25em;
    right: 1.5em;
    z-index: -2;
    transform: rotate(-140deg);
  }
  #reviews-1894 .cs-peach {
    width: 4.3125em;
    height: auto;
    top: 0.625em;
    right: 8.75em;
  }
  #reviews-1894 .cs-beige {
    width: 23.625em;
    height: auto;
    top: 5em;
    right: 0em;
    z-index: -3;
  }
  #reviews-1894 .cs-leaf {
    width: 14em;
    height: auto;
    bottom: 0.6875em;
    left: 0em;
    z-index: 1;
  }
  #reviews-1894 .cs-dots {
    width: 16.3125em;
    height: auto;
    right: 1em;
    bottom: 0em;
    z-index: -2;
  }
  #reviews-1894 .cs-lines {
    width: 15.375em;
    bottom: 0em;
  }
  #reviews-1894 .cs-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2rem);
  }
  #reviews-1894 .cs-item-stars {
    width: 6.9375rem;
    height: auto;
    margin: 0 0 1.5rem 0;
    display: block;
  }
  #reviews-1894 .cs-review {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #reviews-1894 .cs-name {
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
    display: block;
  }
  #reviews-1894 .cs-job {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
  }
  #reviews-1894 .cs-flower {
    width: clamp(7.57rem, 14vw, 14.1875rem);
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-1894 .cs-container {
    max-width: 80rem;
  }
  #reviews-1894 .cs-wrapper {
    flex-direction: row;
    align-items: stretch;
  }
  #reviews-1894 .cs-image-group {
    font-size: min(1.24vw, 1rem);
    height: auto;
    min-height: 35.6875em;
    flex: none;
  }
  #reviews-1894 .cs-item {
    padding: 1.5rem 0;
    align-self: center;
  }
}