@section('aditional-header')
    <!-- Preload solo para la primera imagen del slider (crítica para la primera vista) -->
    <link rel="preload" href="{{ $sliders[0]->resource }}" as="image" type="image/webp">
@endsection

<div class="container-fluid custom-container">
    <div class="slider-area">
        <div class="slider-active">
            @foreach ($sliders as $index => $s)
                <div class="single-slider">
                    <div class="slider-image">
                        <a href="{{ $s->op1 }}" title="{{ $s->op2 }}">
                            <!-- Imagen de escritorio optimizada sin `loading="lazy"` -->
                            <img
                                src="{{ $s->resource }}"
                                srcset="{{ $s->resource }} 1890w, {{ $s->resource_small }} 1200w, {{ $s->resource_xsmall }} 800w"
                                sizes="(min-width: 1024px) 1890px, (min-width: 768px) 1200px, 100vw"
                                class="desk-slider"
                                alt="{{ $s->op2 }}"
                                width="1890"
                                height="550"
                                {{ $index === 0 ? '' : 'loading=lazy' }}>

                            <!-- Imagen móvil optimizada con `loading="lazy"` y `media` para carga diferida en dispositivos móviles -->
                            <img
                                src="{{ $s->op3 }}"
                                sizes="(max-width: 767px) 100vw, (max-width: 1200px) 50vw"
                                class="mob-slider"
                                alt="{{ $s->op2 }}"
                                loading="lazy"
                                media="(max-width: 767px)">
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>