/* Base widths for content */

:root {
  --cp: 4.8rem;
}

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

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

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

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

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

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

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

/* 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;
  }
}