/* ================================
   Layout Patterns - 共通レイアウト
   ================================ */

.layout {
  display: grid;
  gap: var(--space-lg);
}

/* 固定+可変（左360px + 右可変） */
.layout-fixed-left {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout-fixed-left {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

/* SP=1列 / Tablet以上=2列 */
.layout-1to2 {
  grid-template-columns: 1fr;
}

@media (min-width: 769px) {
  .layout-1to2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SP=2列 / Tablet=3列 / Desktop=4列 */
.layout-2to4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 769px) and (max-width: 1023px) {
  .layout-2to4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .layout-2to4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}