---
import Img from '@/components/children/Img.astro'
import Text from '@/components/children/Text.astro'

const { data } = Astro.props
const list = { title: data.title, content: data.subTitle }
---

<div class="box">
  <Img
    url={data.thumb}
    ratio="16 / 9"
    class="img"
  />
  <Text
    list={list}
    btnDisplay={true}
    titleSize="fs-1"
    childrenSize="fs-4"
    textWeight="fw-bold"
    ellipsis="line-ellipsis-small"
    position="positionBottom"
  />
</div>
<style>
  .box {
    position: relative;
    text-align: center;
  }
</style>
