<!-- ============================================ -->
<!--                   Gallery                    -->
<!-- ============================================ -->

<section id="gallery-40">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">La Nostra Galleria</span>
            <h2 class="cs-title">Scopri i Nostri Ultimi Modelli</h2>
        </div>
        <div class="cs-image-group">
            <div class="cs-flex-group ">
                <picture class="cs-picture cs-picture-one">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models1-m.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models1.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models1.jpg" alt="modello seduto" width="613" height="919">
                </picture>
                <picture  class="cs-picture cs-picture-three">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models3-m.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models3.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models3.jpg" alt="modello" width="504" height="755">
                </picture>
            </div>
            <div class="cs-flex-group">
                <picture  class="cs-picture cs-picture-two">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models2-m.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models2.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models2.jpg" alt="modelli in posa" width="697" height="940">
                </picture>
                <picture  class="cs-picture cs-picture-four">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models4-m.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models4.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Gallery/models4.jpg" alt="modella seduta" width="595" height="765">
                </picture>
            </div>
        </div>
    </div>
</section>

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

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

    #gallery-40 .cs-title {
        margin: 0;
    }
    #gallery-40 .cs-image-group {
        font-size: min(1.4vw, 1em);
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
    }
    #gallery-40 .cs-flex-group {
        display: flex;
        flex-direction: column;
    }
    #gallery-40 .cs-flex-group:first-of-type {
        align-items: flex-end;
        margin-right: 1.5em;
    }
    #gallery-40 .cs-picture {
        display: block;
        position: relative;
    }
    #gallery-40 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #gallery-40 .cs-picture-one {
        width: 33.0625em;
        height: 49.5em;
        margin-bottom: 2.25em;
        margin-top: 7.5em;
    }
    #gallery-40 .cs-picture-two {
        width: 32.8125em;
        height: 44.3125em;
        margin-bottom: 2.25em;
        position: relative;
    }
    #gallery-40 .cs-picture-two:before {
        content: "";
        width: 18.8125em;
        height: 27.6875em;
        position: absolute;
        display: block;
        background: #f1eaff;
        opacity: 1;
        bottom: -1.5625em;
        right: -1.375em;
    }
    #gallery-40 .cs-picture-three {
        width: 27.125em;
        height: 40.6875em;
        position: relative;
    }
    #gallery-40 .cs-picture-three:before {
        content: "";
        width: 21.5em;
        height: 31.8125em;
        position: absolute;
        display: block;
        background: #f1eaff;
        opacity: 1;
        top: -0.8125em;
        left: -1.5625em;
    }
    #gallery-40 .cs-picture-four {
        width: 28em;
        height: 36em;
    }
}