@charset "UTF-8";
/* ---------------------------------------------------------
  横並びレイアウト用
--------------------------------------------------------- */

.l-row {
  display: grid;
  gap: 24px;
}

.l-row--3 {
  display: grid;
  gap: 24px;
}

.l-row--sidebar {
  display: grid;
  grid-auto-columns: 100%;
  gap: 80px;
}

@media screen and (min-width: 1024px) {
  .l-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .l-row--sidebar {
    grid-template-columns: calc(100% - 280px - 64px) 280px;
    gap: 64px;
  }
}