/* ============================================================
   Object: Grid & Container
   o- = レイアウト用オブジェクト（中身に依存しない配置パターン）
   ============================================================ */

/* --- Container --- */

.o-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.o-container--full {
  max-width: 100%;
}

.o-container--narrow {
  max-width: 800px;
}

/* --- Grid --- */

.o-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.o-grid--no-gap {
  gap: 0;
}

.o-grid--lg-gap {
  gap: var(--spacing-lg);
}