<template>
  <article class="ds-card">
    <div v-if="$slots.media" class="ds-card__media">
      <slot name="media" />
    </div>
    <div class="ds-card__content">
      <header v-if="$slots.header" class="ds-card__header">
        <slot name="header" />
      </header>
      <div class="ds-card__body">
        <slot />
      </div>
      <footer v-if="$slots.footer" class="ds-card__footer">
        <slot name="footer" />
      </footer>
    </div>
  </article>
</template>

<script setup>

</script>

<style lang="scss">
  .ds-card {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

    &__media { aspect-ratio: 16/9; background: var(--c-surface-muted); }
    &__content { display: grid; gap: var(--sp-3); }

    &__header { display: grid; gap: var(--sp-2); }
    &__footer { display: flex; gap: var(--sp-2); align-items: center; }
  }
</style>