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

<section id="stats-888">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">La nostra missione</span>
            <h2 class="cs-title">Le nostre Statistiche su Salute e Benessere</h2>
            <p class="cs-text">
                Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. 
                Velit officia consequat duis enim velit mollit. Amet minim mollit non deserunt 
                ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
            </p>
            <p class="cs-text">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
                Commodi eos eum amet atque deserunt ut quibusdam quam qui quidem quae.
            </p>
            <a href="" class="cs-button-solid">Prenota Appuntamento</a>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <span class="cs-number">25+</span>
                <span class="cs-desc">Esperti <br>professionisti</span>
            </li>
            <li class="cs-item">
                <span class="cs-number">4.800</span>
                <span class="cs-desc">Pazienti assistiti con <br>successo</span>
            </li>
            <li class="cs-item">
                <span class="cs-number">8+</span>
                <span class="cs-desc">Attrezzature speciali <br>innovative</span>
            </li>
            <li class="cs-item">
                <span class="cs-number">7</span>
                <span class="cs-desc">Premi <br>vinti</span>
            </li>
        </ul>
    </div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-888 {
        padding: var(--sectionPadding);
    }
    #stats-888 .cs-container {
        width: 100%;
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(3rem, 6vw, 4rem);
    }
    #stats-888 .cs-content {
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #stats-888 .cs-text {
        margin-bottom: 1rem;
    }
    #stats-888 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #stats-888 .cs-button-solid {
        font-size: 1rem;
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
    }
    #stats-888 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #stats-888 .cs-button-solid:hover:before {
        width: 100%;
    }
    #stats-888 .cs-card-group {
        width: 100%;
        max-width: 39.375rem;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #stats-888 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        padding: clamp(2.75rem, 5vw, 3.75rem) 2rem;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column: span 2;
        position: relative;
    }
    #stats-888 .cs-item:nth-of-type(1) {
        background-color: #fef7f4;
        border-radius: 0 5rem 0 5rem;
    }
    #stats-888 .cs-item:nth-of-type(2) {
        background-color: #e8e8e8;
        border-radius: 5rem 0 5rem 0;
    }
    #stats-888 .cs-item:nth-of-type(3) {
        background-color: #fbcebd;
        border-radius: 5rem 0 5rem 0;
    }
    #stats-888 .cs-item:nth-of-type(4) {
        background-color: #f7f7f7;
        border-radius: 0 5rem 0 5rem;
    }
    #stats-888 .cs-number {
        font-size: clamp(2.4375rem, 6vw, 3.0625rem);
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 900;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #stats-888 .cs-desc {
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColor);
    }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
    #stats-888 .cs-item {
        grid-column: span 1;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-888 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #stats-888 .cs-content {
        order: 2;
    }
}