/* Base widths for content */

.content-12 {
  margin: 0 auto;
  width: min(1224px, calc(100% - 4.8rem));
}

.content-10 {
  margin: 0 auto;
  width: min(1016px, calc(100% - 4.8rem));
}

.content-8 {
  margin: 0 auto;
  width: min(808px, calc(100% - 4.8rem));
}

.content-7 {
  margin: 0 auto;
  width: min(704px, calc(100% - 4.8rem));
}

.content-6 {
  margin: 0 auto;
  width: min(600px, calc(100% - 4.8rem));
}

.content-5 {
  margin: 0 auto;
  width: min(496px, calc(100% - 4.8rem));
}

.content-4 {
  margin: 0 auto;
  width: min(392px, calc(100% - 4.8rem));
}

/* Base grids */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.grid-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 24px;
}

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 24px;
}

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

@media (max-width: 800px) {
  .cm .grid-12,
  .cm .grid-10,
  .cm .grid-8,
  .cm.grid-12,
  .cm.grid-10,
  .cm.grid-8
  {
    grid-template-columns: 1fr;
  }
}