:root{
  --bg:#ffffff;
  --gap:12px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
}

/* 余白だけ */
.wrap{ padding:20px; }

/* PC: 画面いっぱいに自動で並ぶ */
.grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* スマホ: 最大3列 */
@media (max-width:560px){
  .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
  }
}

/* 画像だけのリンク（装飾なし） */
.card{
  display:block;
  text-decoration:none;
}

/* 画像枠：角丸なし */
.thumb{
  width:100%;
  aspect-ratio: 3 / 4;
  overflow:hidden;
  border-radius:0;
  background:transparent;
}

/* ★切れないように contain */
.thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;     /* 全体を表示 */
  background:transparent;  /* 余白が出たら背景は透明 */
}