/* =========================
   CONTAINERS
========================= */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-lg {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}


/* =========================
   GRID
========================= */

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

.grid-cols-2-wide {
  grid-template-columns: 1.15fr .85fr;
}

.grid-cols-2-narrow {
  grid-template-columns: .85fr 1.15fr;
}

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

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

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-60-40 {
  grid-template-columns: 3fr 2fr;
}

.grid-cols-40-60 {
  grid-template-columns: 2fr 3fr;
}

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

.grid-cards {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
}


/* =========================
   WIDTH
========================= */

.full {
  width: 100%;
}

.screen {
  width: 100%;
  min-height: 100vh;
}

.fit-content {
  width: fit-content;
}

.max-reading {
  max-width: var(--content-width);
}

.reading {
  max-width: var(--content-width);
  margin-inline: auto;
}


/* =========================
   HERO / FEATURE LAYOUTS
========================= */

.min-h-screen {
  min-height: 100vh;
}

.min-h-75 {
  min-height: 75vh;
}

.min-h-50 {
  min-height: 50vh;
}

.min-h-25 {
  min-height: 25vh;
}

.content-center {
  align-content: center;
}

.items-stretch {
  align-items: stretch;
}


@media (max-width: 768px) {

  .grid-cols-2,
  .grid-cols-2-wide,
  .grid-cols-2-narrow,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-40-60,
  .grid-cols-60-40 {
    grid-template-columns: 1fr;
  }

}