// To stack the gallery and the numbered overlay, we use a parent Container
// styled as a grid where each direct child occupies the same cell.
Container(
  style: [Layout.grid],
  // The `*:[grid-area:1/1]` selector is applied via the `classes` property.
  classes: '*:[grid-area:1/1] rounded-box overflow-hidden',
  [
    // The HoverGallery component.
    HoverGallery(
      [
        img(src: '.../deepyr-hat-1.png'),
        img(src: '.../deepyr-hat-2.png'),
        img(src: '.../deepyr-hat-3.png'),
        img(src: '.../deepyr-hat-4.png'),
        img(src: '.../deepyr-hat-5.png'),
      ],
      style: [Size.maxW64],
    ),
    // The overlay with numbers. `pointer-events-none` is crucial
    // to allow hover events to pass through to the gallery underneath.
    div(
      classes: 'grid grid-cols-4 pointer-events-none font-mono ...',
      [
        div([text('2')]),
        div([text('3')]),
        div([text('4')]),
        div([text('5')]),
      ],
    ),
  ],
)

HoverGallery(
  [
    img(src: '/images/deepyr-hat-1.png'),
    img(src: '/images/deepyr-hat-2.png'),
    img(src: '/images/deepyr-hat-3.png'),
    img(src: '/images/deepyr-hat-4.png'),
    img(src: '/images/deepyr-hat-5.png'),
  ],
  style: [Size.maxW64,  Effects.roundedBox, Layout.overflowHidden],
)

final images = [
  img(src: '/images/deepyr-hat-1.png'),
  // ... more images
];

Card(
  [
    HoverGallery(images),
    CardBody([
      CardTitle(
        [
          text('Deepyr Hat'),
          span([text(r'\$25')], classes: 'font-normal'),
        ],
        classes: 'flex justify-between',
      ),
      p([text('High Quality classic cap hat with stitch logo')]),
    ]),
  ],
  style: [
    Card.sm,
    BgUtil.base200,
    Size.maxW64,
    Effects.shadowSm,
  ],
)