/* container */
.container {
  width: 92.5%;
  margin-inline: auto;
  max-width: 1440px;
}

/* column grid */
.grid {
  --temp-col: 4;
  --column-gap: var(--space-5);
  --row-gap: var(--space-6);

  --gap: var(--row-gap) var(--column-gap);

  display: grid;
  gap: var(--gap);

  grid-template-columns: repeat(var(--temp-col), 1fr);
}

.sub-grid {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  grid-template-columns: subgrid;
  gap: var(--gap);
}

@media (min-width: 48em) {
  .grid {
    --temp-col: 8;
    --column-gap: var(--space-6);
    --row-gap: var(--space-7);
  }
}

@media (min-width: 64em) {
  .grid {
    --temp-col: 12;
    --column-gap: var(--space-7);
  }
}

.col-2 {
  grid-column: span 2;
  --col: 2;
}
.col-4 {
  grid-column: span 4;
  --col: 4;
}
.col-2-2 {
  grid-column: 2 / span 2;
  --col: 2;
}
.col-3-2 {
  grid-column: 3 / span 2;
  --col: 2;
}
.col-center {
  grid-column: 2 / span 2;
  --col: 2;
}

@media (min-width: 48em) {
  .col-md-2 {
    grid-column: span 2;
    --col: 2;
  }
  .col-md-3 {
    grid-column: span 3;
    --col: 3;
  }
  .col-md-4 {
    grid-column: span 4;
    --col: 4;
  }
  .col-md-6 {
    grid-column: span 6;
    --col: 6;
  }
  .col-md-8 {
    grid-column: span 8;
    --col: 8;
  }
  .col-md-center {
    grid-column: 2 / span 6;
    --col: 6;
  }
  .col-md-2-2 {
    grid-column: 2 / span 2;
    --col: 2;
  }
  .col-md-2-4 {
    grid-column: 2 / span 4;
    --col: 4;
  }
  .col-md-3-4 {
    grid-column: 3 / span 4;
    --col: 4;
  }
}

@media (min-width: 64em) {
  .col-lg-3 {
    grid-column: span 3;
    --col: 3;
  }
  .col-lg-4 {
    grid-column: span 4;
    --col: 4;
  }
  .col-lg-5 {
    grid-column: span 5;
    --col: 5;
  }
  .col-lg-6 {
    grid-column: span 6;
    --col: 6;
  }
  .col-lg-7 {
    grid-column: span 7;
    --col: 7;
  }
  .col-lg-8 {
    grid-column: span 8;
    --col: 8;
  }
  .col-lg-9 {
    grid-column: span 9;
    --col: 9;
  }

  .col-lg-10 {
    grid-column: span 10;
    --col: 10;
  }

  .col-lg-12 {
    grid-column: span 12;
    --col: 12;
  }
  .col-lg-center {
    grid-column: 2 / span 10;
    --col: 10;
  }
  .col-lg-center-narrow {
    grid-column: 4 / span 6;
    --col: 6;
  }
  .col-lg-2-5 {
    grid-column: 2 / span 5;
    --col: 5;
  }
  .col-lg-3-6 {
    grid-column: 3 / span 6;
    --col: 6;
  }
  .col-lg-4-6 {
    grid-column: 4 / span 6;
    --col: 6;
  }
}

.col-max {
  grid-column: 1 / -1;
  --col: var(--temp-col);
}

/* section-distance */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* site structure */
.site {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

.site__header {
  position: sticky;
  top: 0;
}

.site__main {
  padding-top: var(--space-7);
}

.site__footer {
  padding-top: var(--space-7);
}

@media (min-width: 48em) {
  .site__main {
    padding-top: var(--space-8);
  }

  .site__footer {
    padding-top: var(--space-8);
  }
}