<!-- ============================================ -->
<!--                 Statistiche                  -->
<!-- ============================================ -->

<section id="stats-1659">
    <div class="cs-container">
        <picture class="cs-picture">
            <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/standing.jpg">
            <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/standing.jpg">
            <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/standing.jpg" alt="due persone che parlano" width="630" height="601">
        </picture>
        <div class="cs-content">
            <div class="cs-flex">
                <span class="cs-topper">Corsi</span>
                <h2 class="cs-title">Formazione sulla Sicurezza dei Processi</h2>
                <p class="cs-text">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit, commodi, 
                    provident repellendus minus obcaecati architecto ea aliquam laboriosam odio aspernatur, 
                    dolor maiores? Tenetur, esse. Ad, corporis suscipit? Facilis, eum earum! Lorem ipsum 
                    dolor sit amet consectetur adipisicing elit. Maxime, eveniet!
                </p>
            </div>
            <ul class="cs-stat-group">
                <li class="cs-stat">
                    <span class="cs-number">886</span>
                    <span class="cs-desc">Progetti completati</span>
                </li>
                <li class="cs-stat">
                    <span class="cs-number">475</span>
                    <span class="cs-desc">Clienti abituali</span>
                </li>
                <li class="cs-stat">
                    <span class="cs-number">2K</span>
                    <span class="cs-desc">Clienti soddisfatti</span>
                </li>
                <li class="cs-stat">
                    <span class="cs-number">37</span>
                    <span class="cs-desc">Team di professionisti</span>
                </li>
            </ul>           
        </div>
    </div>
</section>

/*-- -------------------------- -->
<---        Statistiche         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-1659 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #stats-1659 .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;
  }
  #stats-1659 .cs-content {
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
  }
  #stats-1659 .cs-flex {
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #stats-1659 .cs-text {
    margin-bottom: 1rem;
  }
  #stats-1659 .cs-text:last-of-type {
    margin-bottom: clamp(2rem, 5vw, 4rem);
  }
  #stats-1659 .cs-stat-group {
    width: 100%;
    max-width: 53.75rem;
    padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
    box-sizing: border-box;
    margin: 0;
    background-color: #f7f7f7;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 2rem;
    column-gap: 1rem;
    position: relative;
    z-index: 10;
  }
  #stats-1659 .cs-stat {
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    grid-column: span 6;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  #stats-1659 .cs-number {
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #stats-1659 .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #stats-1659 .cs-picture {
    width: 100%;
    max-width: 39.375rem;
    min-height: 25rem;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #stats-1659 .cs-picture img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #stats-1659 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
  }
  #stats-1659 .cs-content {
    padding-bottom: clamp(2.5rem, 6vw, 3.75rem);
  }
  #stats-1659 .cs-flex {
    width: 45%;
  }
  #stats-1659 .cs-stat-group {
    width: 77vw;
  }
  #stats-1659 .cs-stat {
    grid-column: span 3;
  }
  #stats-1659 .cs-picture {
    height: 100%;
    width: 48vw;
    position: absolute;
    left: 0;
    top: 0;
  }
}