firq-dev-website/src/components/servantCard.astro

---
export interface Props {
  name: string
  level: string
  skills: string
  np: string
  image_servant: string
  image_bond: string
  ml: string
  bond10: string
}

const { bond10, ml, image_bond, image_servant, np, skills, level, name } =
  Astro.props

const servant_img: string = `/assets/servant/${image_servant}.webp`
const bondce_img: string = `/assets/ce/bond-ce/${image_bond}.webp`
let bondce_css: string = 'bond-ce'

if (bond10 === 'false') {
  bondce_css += ' unobtained'
}
---

<article>
  <img src={servant_img} alt={name} />
  <h2 class="subtext">
    Level {level}<br />
    {skills}<br />
    NP {np}
  </h2>
  <div class="expand-on-hover">
    <img class={bondce_css} src={bondce_img} alt="" />
    <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
  </div>
</article>

<style>
  .heading {
    display: flex;
    height: 4rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    max-width: 200px;
    padding-bottom: 0.3rem;
    font-weight: bold;
  }

  .servants-container {
    row-gap: 1em;
    column-gap: 1em;
    justify-content: center;
    align-self: center;
  }

  article:hover {
    transform: scale(var(--hover-scale));
  }

  article {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: var(--c-darkergray);
    border-color: var(--c-darkgray);
    padding: 0em 0.75em 0.5rem 0.75em;
    width: 40%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform var(--speed) var(--ease);
    border-radius: 1.25rem;
  }

  article > img {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 2.5rem;
    margin-top: 0.75rem;
  }
  .subtext {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 5;
    line-height: 20px;
  }

  .expand-on-hover {
    background-color: var(--c-duskgray);
    z-index: 99;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: 92.5%;
    left: 0px;
    right: 0px;
    border-radius: 0px 0px 1.25rem 1.25rem;
  }

  article:hover .expand-on-hover {
    transform: scaleY(1);
    transition: transform 200ms ease-in-out;
    background-color: var(--c-duskgray);
  }

  .bond-ce {
    padding-top: 0.75rem;
    height: 3rem;
  }

  .unobtained {
    filter: grayscale(1);
  }

  @media (min-width: 512px) {
    article {
      padding: 10px;
      width: auto;
      height: auto;
    }

    article > img {
      width: 200px;
      height: 200px;
    }

    .bond-ce {
      height: 3.5rem;
    }

    .expand-on-hover {
      top: 95%;
    }
  }
</style>