Carousel

O @carousel exibe uma coleção de slides, com suporte a scroll horizontal (padrão) ou layout de grid.

Uso básico (scroll horizontal)

```seed
@carousel
  @slide
    @image src=/img1.jpg, alt=Slide 1
    @title
      Produto Alpha
    @caption
      A melhor opção do mercado.
    @cta
      @button variant=primary
        Ver mais
  @slide
    @image src=/img2.jpg, alt=Slide 2
    @title
      Produto Beta
    @caption
      Inovação e qualidade.
  @slide
    @image src=/img3.jpg, alt=Slide 3
```

Design: cards (grid)

Use design=cards para exibir os slides em um grid responsivo (1 coluna no mobile, 2 no tablet, 3 no desktop):

```seed
@carousel design=cards
  @slide
    @image src=/img1.jpg, alt=Card 1
    @title
      Título do Card
    @caption
      Descrição breve.
  @slide
    @image src=/img2.jpg, alt=Card 2
  @slide
    @image src=/img3.jpg, alt=Card 3
    @title
      Terceiro Card
```

Slots do @slide

Slot	Tag gerada	Obrigatório
`@image`	`<img>` no topo	Não
`@title`	`<h3>`	Não
`@caption`	`<p>`	Não
`@cta`	`<div>` de ações	Não

Todos os slots são opcionais. Slides sem imagem mostram apenas o conteúdo textual. Slides sem nenhum slot são renderizados como cards vazios.

Variante `contained`

Limita a largura máxima do carousel:

```seed
@carousel variant=contained
  @slide
    ...
```

Comportamento

O carousel padrão usa overflow-x: auto com scroll-snap — funciona sem JavaScript. Em touch screens, o deslize funciona nativamente.

ℹ️