@props(['data'])

<div class="container-fluid px-0">
    <div class="row g-5"> {{-- g-5 para un espacio elegante entre bloques --}}
        @foreach($data as $item)
            <div class="col-12 col-lg-6">
                {{-- Bloque de ítem sin bordes --}}
                <div class="product-block h-100">

                    {{-- Imagen Arriba --}}
                    <div class="mb-3">
                        <img src="{{ Storage::url($item['image']) }}"
                             alt="Product Image"
                             class="img-fluid w-100 object-fit-cover"
                             style="aspect-ratio: 16/9; border-radius: 8px;">
                    </div>

                    {{-- Texto Abajo --}}
                    <div class="content-wrapper">
                        {{-- text-break para que títulos largos no rompan el layout --}}
                        <h3 class="fw-bold text-break mb-2" style="color: #014023; font-size: 1.5rem;">
                            {{ translate_data($item['title']) }}
                        </h3>

                        {{-- Descripción con interlineado cómodo --}}
                        <div class="text-muted text-break" style="line-height: 1.7; font-size: 1rem;">
                            {!! translate_data($item['description']) !!}
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>