.container {
  padding-left:60px;
  padding-right:60px;
  max-width:1600px;
  margin:0 auto;
}
.container.narrow {
  max-width:800px;
}


.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}
.grid.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}
.grid.seamless {
  grid-column-gap: 0;
  grid-row-gap: 0;
}
.grid .span-1 {
  grid-column: span 1;
}
.grid .span-2 {
  grid-column: span 2;
}
.grid .span-3 {
  grid-column: span 3;
}
.grid .span-4 {
  grid-column: span 4;
}
.grid .span-5 {
  grid-column: span 5;
}
.grid .span-6 {
  grid-column: span 6;
}
.grid .span-7 {
  grid-column: span 7;
}
.grid .span-8 {
  grid-column: span 8;
}
.grid .span-9 {
  grid-column: span 9;
}
.grid .span-10 {
  grid-column: span 10;
}
.grid .span-12 {
  grid-column: span 12;
}

/* for this case, these exist in a 5-col grid, but the "philosophy" is still 12-column grid (12 / 5 = 2.4)*/
.grid.grid-5 .span-2-4 {
  grid-column: span 1;
}

@media screen and (max-width:800px) {
    .container {
    padding-left:42px;
    padding-right:42px;
  }
}