<a class="character-card" :href="href" :class="char">
  <div class="image">
    <slot name="image"></slot>
  </div>
  <div class="text">
    <slot name="title"></slot>
    <slot></slot>
  </div>
</a>

<style>
  .character-card {
    display: grid;
    align-content: start;

    font-size: 0.875em;
    color: inherit;
    text-decoration: none;

    background-color: var(--clr-box-background);

    border: var(--border-thin) solid var(--clr-box-border);
    border-radius: 1em;

    overflow: hidden;

    &:hover {
      img {
        scale: 1.1;
      }
    }

    & .image {
      overflow: hidden;
      aspect-ratio: 3/2;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      scale: 1;
      transition: scale 0.2s ease-in-out;
    }

    & .text {
      --card-spacing: 1.5rem;
      padding-block: var(--card-spacing);
      padding-inline: var(--card-spacing);
    }

    & h2 {
      position: relative;
      font-size: 1.375rem;
      margin-block: 0 0.5em;
      padding-block: 0 0.5em;

      &::after {
        content: '';
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
        height: 0.125em;
        width: 2em;
        border-radius: 1em;
        background: linear-gradient(
          to right,
          oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
          oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
        );
      }
    }

    & p {
      margin-block: 0;

      & + p {
        margin-block: 1em 0;
      }
    }
  }
</style>
