/* ================================================
   Grid System - シンプルで汎用的なグリッドレイアウト
   ================================================ */

/* Grid Container */
.grid {
  display: grid;
  width: 100%;
}

/* Grid Columns - モバイルファースト */
.grid-1-cols {
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
}

.grid-2-cols {
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
}

@media (min-width: 768px) {
  .grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-3-cols {
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
}

@media (min-width: 768px) {
  .grid-3-cols {
    grid-template-columns: repeat(var(--grid-cols-tablet), 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3-cols {
    grid-template-columns: repeat(var(--grid-cols-desktop), 1fr);
  }
}

.grid-4-cols {
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
}

@media (min-width: 768px) {
  .grid-4-cols {
    grid-template-columns: repeat(var(--grid-cols-tablet), 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4-cols {
    grid-template-columns: repeat(var(--grid-cols-wide), 1fr);
  }
}

/* Grid Gap - 間隔 */
.gap-sm {
  gap: var(--gap-sm);
}

.gap-md {
  gap: var(--gap-md);
}

.gap-lg {
  gap: var(--gap-lg);
}

.gap-xl {
  gap: var(--gap-xl);
}

/* Auto-fit Grid (自動調整) */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}