<!-- ============================================ -->
<!--                    Servizi                   -->
<!-- ============================================ -->

<section id="services-1354">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Servizi</span>
            <h2 class="cs-title">Siamo Impegnati a Offrire Servizi di Altissima Qualità</h2>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <a href="" class="cs-link">
                    <h3 class="cs-h3"><span class="cs-span">Crescita del</span> Business</h3>
                </a>
                <picture class="cs-background">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting1.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting1.jpg">
                    <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting1.jpg" alt="persone che lavorano" width="305" height="305">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <h3 class="cs-h3"><span class="cs-span">Costruire</span> Relazioni</h3>
                </a>
                <picture class="cs-background">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting2.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting2.jpg">
                    <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting2.jpg" alt="persone che lavorano" width="305" height="305">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <h3 class="cs-h3"><span class="cs-span">Eccellenza</span> Operativa</h3>
                </a>
                <picture class="cs-background">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting3.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting3.jpg">
                    <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting3.jpg" alt="persone che lavorano" width="305" height="305">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <h3 class="cs-h3"><span class="cs-span">Mantenimento</span> a Vita</h3>
                </a>
                <picture class="cs-background">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting4.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting4.jpg">
                    <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting4.jpg" alt="persone che lavorano" width="305" height="305">
                </picture>
            </li>
        </ul>
    </div>
</section>

/*-- -------------------------- -->
<---          Servizi           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1354 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 10;
    }
    #services-1354 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-1354 .cs-content {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #services-1354 .cs-topper {
        color: #767676;
    }
    #services-1354 .cs-title {
        max-width: 25ch;
        margin: 0;
    }
    #services-1354 .cs-card-group {
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #services-1354 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        height: 19.0625rem;
        margin: 0;
        padding: 0;
        background-color: #000;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
        box-sizing: border-box;
        grid-column: span 12;
        grid-row: span 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        position: relative;
        z-index: 1;
    }
    #services-1354 .cs-item:hover .cs-background:before {
        background-color: var(--primary);
        opacity: 0.84;
    }
    #services-1354 .cs-item:hover .cs-background img {
        transform: scale(1.2);
    }
    #services-1354 .cs-link {
        text-decoration: none;
        width: 100%;
        height: 100%;
        padding: 1.5rem;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #services-1354 .cs-h3 {
        font-size: 1.5625rem;
        line-height: 1.2em;
        font-weight: bold;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColorWhite);
        transition: color 0.3s;
    }
    #services-1354 .cs-span {
        display: block;
    }
    #services-1354 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-1354 .cs-background:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.4;
        top: 0;
        left: 0;
        z-index: 1;
        transition:
            background-color 0.3s,
            opacity 0.3s;
    }
    #services-1354 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s;
    }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
    #services-1354 .cs-item {
        grid-column: span 6;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-1354 .cs-content {
        text-align: left;
        align-items: flex-start;
    }
    #services-1354 .cs-item {
        grid-column: span 3;
    }
}