/* 画像のみカード */
.card--image {
  position: relative;
  display: block;
  border: 1px solid var(--line, #eee);
  border-radius: var(--radius-l, 16px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.06));
  transition: transform .08s ease, box-shadow .12s ease;
}
.card--image:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2, 0 6px 20px rgba(0,0,0,.12));
}

/* 正方形の枠に全カードを統一（検索・一覧・ギャラリー共通） */
.card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;       /* 正方形固定 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* 画像は全体が収まる（ギャラリーと同じ挙動） */
.card__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 横長・縦長どちらも枠内に収める */
  display: block;
}

/* 4列レイアウト（全端末共通） */
.cards-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr) !important;
}

/* 念のためスマホ・タブレットも4列維持 */
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) {
  .cards-grid { grid-template-columns: repeat(4, 1fr) !important; }
}