#css
/* 背景カード */
.card-sheet　 .txt {
  position: relative;
  width: min(560px, 90vw);
  /* 一部の環境で aspect-ratio が無効な場合があるので次の疑似比率も入れておく */
  aspect-ratio: 768 / 1152;
  background: url('https://img.atwiki.jp/tmcsys/attach/85/25/ChatGPT%20Image%202025%E5%B9%B49%E6%9C%886%E6%97%A5%2006_40_42.jpg') center/cover no-repeat;
  margin: 12px auto;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --ink: #2a2012;
  --shadow: rgba(255,255,255,.35);
}

/* テキスト共通 */
.card-sheet .txt {
  position: absolute;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--shadow);
  line-height: 1.2;
  font-size: clamp(12px, 1.9vw, 20px);
  left: var(--x, 0%);
  top:  var(--y, 0%);
  width: var(--w, auto);
  height: var(--h, auto);
  white-space: pre-wrap;
}

/* 位置プリセット */
.card-sheet .c-we     { --x:  6.5%; --y: 9.5%; --w: 24%; text-align:center; font-weight:700; }
.card-sheet .c-range  { --x: 36.5%; --y: 9.5%; --w: 24%; text-align:center; font-weight:700; }
.card-sheet .c-adj    { --x: 66.5%; --y: 9.5%; --w: 24%; text-align:center; font-weight:700; }

.card-sheet .c-main   { --x: 7%; --y: 25%; --w: 86%; --h: 32%; font-size: clamp(12px, 1.6vw, 18px); }
.card-sheet .c-win    { --x: 7%; --y: 60.5%; --w: 86%; }
.card-sheet .c-lose   { --x: 7%; --y: 72.5%; --w: 86%; }
.card-sheet .c-notes  { --x: 7%; --y: 84.5%; --w: 86%; font-size: clamp(11px, 1.4vw, 16px); opacity:.9; }

#html
<div class="card-sheet">
  <div class="txt c-we">WE 2</div>
  <div class="txt c-range">レンジ 3</div>
  <div class="txt c-adj">調整なし</div>

  <div class="txt c-main">ここに効果説明や自由記入テキスト</div>

  <div class="txt c-win">勝利条件：ナシ</div>
  <div class="txt c-lose">敗北条件：ライフ0 または デッキ切れ</div>
  <div class="txt c-notes">ベースライフダメージ：有効打で1点</div>
</div>