/* ラッパー */
section.gallery { width: 100%; }

/* 3カラムグリッド（共通） */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 20px; /* 要件：gap 20px（縦も含む） */
}

/* 画像プレビュー（エディタ用） */
.tg-slot {
  position: relative;
  display: block;
  width: 100%;
  /*padding-top: 66%; 比率ダミー */
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
}
.tg-slot img {
width: 100%;
    height: 300px;
    align-items: center;
    -o-object-fit: cover;
    object-fit: cover;
}
.tg-slot--empty {
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-size: 12px;
}

/* セル内の実画像（フロント共通） */
.img-container.c-rounded img { display:block; width:100%; }

/* レイアウト別のスパン指定 */
/* ３分割（1,1,1） */
.tg-grid--three .tg-cell { grid-column: span 1; }

/* 左2 + 右1 */
.tg-grid--left2 .tg-cell--left2-0 { grid-column: span 2; } /* 大きい */
.tg-grid--left2 .tg-cell--left2-1 { grid-column: span 1; }

/* 右2 + 左1 */
.tg-grid--right2 .tg-cell--right2-0 { grid-column: span 1; }
.tg-grid--right2 .tg-cell--right2-1 { grid-column: span 2; } /* 大きい */

/* 全幅1 */
.tg-grid--full .tg-cell--full-0 { grid-column: 1 / -1; }

/* エディタ視認性 */
.editor-styles-wrapper section.gallery { outline: 1px dashed #e2e8f0; padding: 8px; border-radius: 8px; }
.tg-row__head { display:flex; gap:12px; align-items:flex-end; margin-bottom:10px; }
.tg-row__ops { margin-left:auto; display:flex; gap:8px; }
.tg-add { margin-top: 8px; }


/* === Mobile: 1列化 === */
@media (max-width: 767px) {
  .tg-grid {
    grid-template-columns: 1fr; /* 1列 */
    gap: 20px;                  /* 縦横とも20pxのまま */
  }

  /* どのレイアウトでも各セルを全幅に */
  .tg-grid .tg-cell { grid-column: 1 / -1 !important; }

  /* エディタ用スロットの比率はそのままでOK（任意で高さを変えたい場合はここで上書き可能） */
  /* .tg-slot { padding-top: 56.25%; } など */
}