@props([
    'xs' => 12,   // mobile (default)
    'sm' => null, // sm >= 640px
    'md' => null, // md >= 768px
    'lg' => null, // lg >= 1024px
    'xl' => null, // xl >= 1280px
    'class' => '',
])

@php
    // Normaliza a enteros y construye clases col-span
    $makeSpan = function($prefix, $value) {
        if ($value === null) return null;
        $v = (int) $value;
        $v = max(1, min(12, $v)); // entre 1 y 12
        return $prefix ? "{$prefix}:col-span-{$v}" : "col-span-{$v}";
    };

    $classes = [];
    $classes[] = $makeSpan('', $xs);
    if ($sm) $classes[] = $makeSpan('sm', $sm);
    if ($md) $classes[] = $makeSpan('md', $md);
    if ($lg) $classes[] = $makeSpan('lg', $lg);
    if ($xl) $classes[] = $makeSpan('xl', $xl);

    $final = trim(implode(' ', array_filter($classes)) . ' ' . $class);
@endphp

<div {{ $attributes->merge(['class' => $final ]) }}>
    {{ $slot }}
</div>