.appShell {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.appShell > header { grid-area: header; }
.appShell > main { grid-area: main; }
.appShell > footer { grid-area: footer; }

.appMain > section {
  padding: 1.5rem 1rem;
}
.bandInner {
  width: min(90vw, 74rem);
  margin: 0 auto;
  padding: 5vh 0;
}
.bandNarrow {
  width: min(90vw, 48rem);
  margin: 0 auto;
  padding: 5vh 0;
}

.zigRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: center;
  padding: 3vh 0;
}
.zigRow:nth-child(odd) .zigText {
  order: 1;
}
.zigRow:nth-child(odd) .zigMedia {
  order: 2;
}
.zigRow:nth-child(even) .zigText {
  order: 2;
}
.zigRow:nth-child(even) .zigMedia {
  order: 1;
}

.editorialColumns {
  columns: 3;
  column-gap: 2rem;
  column-rule: 1px solid var(--color-line);
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw;
}

@media (max-width: 1024px) {
  .editorialColumns {
    columns: 2;
  }
  .productGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
  }
}

@media (max-width: 767px) {
  .bandInner,
  .bandNarrow {
    width: 92vw;
    padding: 3vh 0;
  }
  .zigRow {
    grid-template-columns: 1fr;
  }
  .zigRow:nth-child(even) .zigText,
  .zigRow:nth-child(odd) .zigText {
    order: 2;
  }
  .zigRow:nth-child(even) .zigMedia,
  .zigRow:nth-child(odd) .zigMedia {
    order: 1;
  }
  .editorialColumns {
    columns: 1;
  }
  .productGrid {
    grid-template-columns: 1fr;
    gap: 4vw;
  }
}