/* P-006 · Grid / page shell */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page__main {
  flex: 1 0 auto;
}

.page__content {
  padding-block: var(--space-8) var(--space-16);
}

@media (min-width: 1024px) {
  .page__content {
    padding-block: var(--space-10) var(--space-20);
  }
}

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

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-16);
  }
}

.section--tint {
  background-color: var(--color-bg-tint);
}

.grid {
  display: grid;
  gap: var(--gutter);
}

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

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

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