@layer layout;

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

@layer layout {
  .container {
    width: min(var(--container-lg), calc(100% - clamp(1.5rem, 4vw, 4rem)));

    margin-inline: auto;
  }

  .container--reading {
    width: min(var(--container-reading), calc(100% - 2rem));

    margin-inline: auto;
  }
}

/* ==========================================
   SECTION SPACING
========================================== */

@layer layout {
  .section {
    padding-block: var(--space-6);
  }

  .section-sm {
    padding-block: var(--space-5);
  }

  .section-lg {
    padding-block: var(--space-8);
  }

  .section:last-of-type {
    padding-bottom: var(--space-3);
  }
}

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

@layer layout {
  .grid {
    display: grid;

    gap: var(--space-4);
  }

  .grid-2 {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-4);
  }

  .grid-3 {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-4);
  }

  .grid-4 {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: var(--space-4);
  }
}

/* ==========================================
   STACK
========================================== */

@layer layout {
  .stack {
    display: flex;

    flex-direction: column;

    gap: var(--space-3);
  }

  .stack-sm {
    gap: var(--space-2);
  }

  .stack-lg {
    gap: var(--space-5);
  }
}

/* ==========================================
   FLEX
========================================== */

@layer layout {
  .flex {
    display: flex;
  }

  .flex-center {
    display: flex;

    align-items: center;

    justify-content: center;
  }

  .flex-between {
    display: flex;

    align-items: center;

    justify-content: space-between;
  }
}

/* ==========================================
   RESPONSIVE
========================================== */

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

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: var(--space-5);
  }

  .section-lg {
    padding-block: var(--space-6);
  }
}