<section class="bg-light-dark py-10 md:py-20">
    <div class="container flex flex-col gap-10">
        <h2 class="text-black text-center">@isset($title) {{$title}} @else Ils nous font confiance @endif</h2>
        <div class="embla relative">
            <div class="embla__viewport">
                <div class="embla__container">
                    <div class="embla__slide"><img alt="Logo Eurovia" src="{{ asset('images/partners/eurovia.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo Opinel" src="{{ asset('images/partners/opinel.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo AKTID" src="{{ asset('images/partners/aktid.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo PLV" src="{{ asset('images/partners/plv.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo SUEZ" src="{{ asset('images/partners/suez.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo Panzani" src="{{ asset('images/partners/panzani.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo Stäubli" src="{{ asset('images/partners/staubli.svg') }}" /></div>
                    <div class="embla__slide"><img alt="Logo Apave" src="{{ asset('images/partners/apave.svg') }}" /></div>
                </div>
            </div>
            <div class="swiper-overlay"></div>
        </div>
    </div>
</section>

<style>
    .embla {
        max-width: 100%;
        --slide-height: 19rem;
        --slide-spacing: 1rem;
        --slide-size: 100%;
        --slide-spacing-sm: 1.6rem;
        --slide-size-sm: 50%;
        --slide-spacing-lg: 2rem;
        --slide-size-lg: calc(100% / 6);
    }
    .embla__viewport {
        overflow: hidden;
    }
    .embla__container {
        backface-visibility: hidden;
        display: flex;
        touch-action: pan-y pinch-zoom;
        margin-left: calc(var(--slide-spacing) * -1);
    }
    .embla__slide img {
        height: 30px;
    }

    @media (min-width: 750px) {
        .embla__container {
            margin-left: calc(var(--slide-spacing-sm) * -1);
        }
        .embla__slide img {
            height: 50px;
        }
    }
    @media (min-width: 1200px) {
        .embla__container {
            margin-left: calc(var(--slide-spacing-lg) * -1);
        }
    }
    .embla__slide {
        min-width: 0;
        flex: 0 0 var(--slide-size);
        padding-left: var(--slide-spacing);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    @media (min-width: 300px) {
        .embla__slide {
            flex: 0 0 var(--slide-size-sm);
            padding-left: var(--slide-spacing-sm);
        }
    }
    @media (min-width: 1200px) {
        .embla__slide {
            flex: 0 0 var(--slide-size-lg);
            padding-left: var(--slide-spacing-lg);
        }
    }


    .swiper-overlay {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #F7F6F2;
        background: -webkit-linear-gradient(90deg, rgb(242, 238, 230) 0%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(242, 238, 230) 100%);
        background: -moz-linear-gradient(90deg, rgb(242, 238, 230) 0%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(242, 238, 230) 100%);
        background: linear-gradient(90deg, rgb(242, 238, 230) 0%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(242, 238, 230) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F7F6F2", endColorstr="#F7F6F2", GradientType=0);

        z-index: 1;
    }
</style>
