.gallery ul {
  display: flex;
  flex-wrap: wrap; /* 折り返しを有効にする */
  gap: 15px; /* 画像間の余白 */
  padding: 0;
  list-style: none;
}

.gallery li {
  /* 4列にする場合の例 (gap分を引く) */
  flex: 0 0 calc(25% - 15px);
  box-sizing: border-box;
}

.gallery img {
  width: 100%; /* 親要素(li)の幅に合わせる */
  height: 120px; /* 高さを固定 */
  object-fit: cover; /* 画像の縦横比を維持して枠に収める */
  border-radius: 8px; /* 角を少し丸くする */
}

/* スマホ対応（1列または2列にする） */
@media (max-width: 768px) {
  .gallery li {
    flex: 0 0 calc(50% - 15px); /* スマホは2列 */
  }
}