Building Block · Mídia

Masonry Mixed (proporções)

Mosaico que respeita a proporção PRÓPRIA de cada item — mistura 1:1, 4:5 e 16:9 numa grade CSS multi-column (masonry real). Clique abre o lightbox na proporção daquele item. Cada item define sua aspect; sem src, placeholders premium.

tsx

import { MasonryMixed } from "@/components/blocks/media-gallery";

// Placeholders com proporções mistas (default):
<MasonryMixed columns={3} />

// Com fotos reais — cada item declara sua proporção:
<MasonryMixed
  columns={3}
  items={[
    { src: "/fotos/final.jpg", alt: "Final", caption: "Final", aspect: "16/9" },
    { src: "/fotos/campeao.jpg", alt: "Campeão", caption: "Campeão", aspect: "4/5" },
    { src: "/fotos/detalhe.jpg", alt: "Detalhe", caption: "Detalhe", aspect: "1/1" },
    // ...
  ]}
/>