/* グリッドコンテナの設定 */
.grid-container {
    display: grid;
    gap: 15px; /* アイテム間の余白 */
    padding: 15px;
    /* スマホの基本設定：1列 */
    grid-template-columns: 1fr;
  }
  
  /* 画像の設定：親要素に合わせて伸縮 */
  .grid-item img {
    width: 100%;
    object-fit: cover; /* 画像を切り抜いてきれいに配置 */
    display: block;
  }
  
  /* タブレット：2列 */
  @media (min-width: 600px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* PC：3列 */
  @media (min-width: 900px) {
    .grid-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }