/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.two-col--wide-left {
  grid-template-columns: 1.5fr 1fr;
}

.two-col--wide-right {
  grid-template-columns: 1fr 1.5fr;
}

.content-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
}

.content-sidebar__main {
  min-width: 0;
}

.content-sidebar__aside {
  min-width: 0;
}

/* ---- Responsive ---- */

@media (max-width: 479px) {
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-padding: 48px;
    --grid-gap: 24px;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .two-col--wide-left,
  .two-col--wide-right {
    grid-template-columns: 1fr;
  }

  .content-sidebar {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

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

@media (min-width: 1280px) {
  .container {
    padding: 0 32px;
  }
}