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

<section id="stats-1312">
    <div class="cs-container">
        <div class="cs-content">
            <p class="cs-quote">"Creare valore a lungo termine con intelligenza imprenditoriale! Il nostro obiettivo principale è la crescita."</p>
            <p class="cs-name">Mario Rossi</p>
            <p class="cs-job">Direttore Creativo</p>
        </div>
        <ul class="cs-card-group">
            <div class="cs-flex-group">
                <div class="cs-item">
                    <p class="cs-number">15</p>
                    <p class="cs-stat">Uffici</p>
                </div>
                <div class="cs-item">
                    <p class="cs-number">10</p>
                    <p class="cs-stat">Anni</p>
                </div>
            </div>
            <div class="cs-flex-group">
                <div class="cs-item">
                    <p class="cs-number">65</p>
                    <p class="cs-stat">Persone</p>
                </div>
                <div class="cs-item">
                    <p class="cs-number">98</p>
                    <p class="cs-stat">Progetti</p>
                </div>
            </div>
        </ul>
    </div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-1312 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
    }
    #stats-1312 .cs-container {
        width: 100%;
        max-width: 25rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(3rem, 6vw, 4rem);
    }
    #stats-1312 .cs-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #stats-1312 .cs-quote {
        font-size: clamp(1.9375rem, 5.1vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: bold;
        margin: 0;
        margin-bottom: 1.5rem;
        color: #1a1a1a;
        text-align: inherit;
    }
    #stats-1312 .cs-name {
        font-size: clamp(1.25rem, 3.25vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        margin-bottom: 0.5rem;
        color: var(--primary);
        display: block;
        text-align: inherit;
    }
    #stats-1312 .cs-job {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        text-align: inherit;
    }
    #stats-1312 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        row-gap: 4rem;
    }
    #stats-1312 .cs-card-group::after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #e8e8e8;
        position: absolute;
        top: 50%;
    }
    #stats-1312 .cs-flex-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
    }
    #stats-1312 .cs-flex-group::before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #e8e8e8;
        position: absolute;
        right: 50%;
    }
    #stats-1312 .cs-item {
        height: clamp(6.25rem, 11vw, 10rem);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #stats-1312 .cs-number {
        font-size: clamp(6.25rem, 11vw, 10rem);
        line-height: 1.2em;
        font-weight: 900;
        margin: 0;
        color: #e8e8e8;
        display: block;
    }
    #stats-1312 .cs-stat {
        font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
        line-height: 1.5em;
        font-weight: bold;
        margin: 1rem 0 0 0;
        color: var(--headerColor);
        display: block;
        position: absolute;
        z-index: 2;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #stats-1312 .cs-container {
        max-width: 120rem;
    }
    #stats-1312 .cs-card-group {
        flex-direction: row;
    }
    #stats-1312 .cs-card-group::after {
        width: 1px;
        height: 100%;
        top: initial;
        right: 50%;
    }
    #stats-1312 .cs-flex-group {
        justify-content: space-around;
        flex: 1;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-1312 .cs-content {
        max-width: 53.125rem;
    }
}