/* ============================================
   Two Column Grid Layout
   ============================================ */

.layout--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .layout--2col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

.layout--2col--sidebar {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout--2col--sidebar {
    grid-template-columns: 1fr 300px;
  }
}