/* =========================================
   GLOBAL LAYOUT SYSTEM
========================================= */


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

.container {

  width: 100%;

  max-width:
    var(--container-width);

  margin: 0 auto;

  padding-left:
    var(--space-6);

  padding-right:
    var(--space-6);
}


.container-narrow {

  width: 100%;

  max-width:
    var(--container-narrow);

  margin: 0 auto;

  padding-left:
    var(--space-6);

  padding-right:
    var(--space-6);
}


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

.section {

  padding-top:
    var(--space-20);

  padding-bottom:
    var(--space-20);
}


.section-sm {

  padding-top:
    var(--space-12);

  padding-bottom:
    var(--space-12);
}


.section-lg {

  padding-top:
    var(--space-24);

  padding-bottom:
    var(--space-24);
}


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

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

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

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

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

.gap-md {
  gap: var(--space-4);
}

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


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

.grid {
  display: grid;
}

.grid-2 {

  display: grid;

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

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


.grid-3 {

  display: grid;

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

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


.grid-4 {

  display: grid;

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

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


.auto-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

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


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

.w-full {
  width: 100%;
}

.max-w-sm {
  max-width: 500px;
}

.max-w-md {
  max-width: 700px;
}

.max-w-lg {
  max-width: 900px;
}


/* =========================================
   SPACING UTILITIES
========================================= */

.mt-sm {
  margin-top: var(--space-4);
}

.mt-md {
  margin-top: var(--space-8);
}

.mt-lg {
  margin-top: var(--space-12);
}

.mb-sm {
  margin-bottom: var(--space-4);
}

.mb-md {
  margin-bottom: var(--space-8);
}

.mb-lg {
  margin-bottom: var(--space-12);
}

.pt-lg {
  padding-top: var(--space-12);
}

.pb-lg {
  padding-bottom: var(--space-12);
}


/* =========================================
   POSITION UTILITIES
========================================= */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}


/* =========================================
   OVERFLOW
========================================= */

.overflow-hidden {
  overflow: hidden;
}


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

@media (max-width: 1024px) {

  .grid-4 {

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


@media (max-width: 768px) {

  .container,
  .container-narrow {

    padding-left:
      var(--space-4);

    padding-right:
      var(--space-4);
  }

  .section {

    padding-top:
      var(--space-16);

    padding-bottom:
      var(--space-16);
  }

  .grid-2,
  .grid-3,
  .grid-4 {

    grid-template-columns:
      1fr;
  }

  .flex-mobile-column {

    flex-direction:
      column;
  }
}