.col-row {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  margin: auto;
  max-width: 30em;
}


/*
  COLUMN-CONTROLLED ALIGNMENT
*/
.col-top,
.xs\=col-top {
  align-self: start;
}
.col-center,
.xs\=col-center {
  align-self: center;
}
.col-bottom,
.xs\=col-bottom {
  align-self: end;
}
.col-stretch,
.xs\=col-stretch {
  align-self: stretch;
}


/*
  EXTRA SMALL
*/
.col-1,
.xs\=col-1 {
  grid-column: span 1;
}
.col-2,
.xs\=col-2 {
  grid-column: span 2;
}
.col-3,
.xs\=col-3 {
  grid-column: span 3;
}
.col-4,
.xs\=col-4 {
  grid-column: span 4;
}
.col-5,
.xs\=col-5 {
  grid-column: span 5;
}
.col-6,
.xs\=col-6 {
  grid-column: span 6;
}
.col-7,
.xs\=col-7 {
  grid-column: span 7;
}
.col-8,
.xs\=col-8 {
  grid-column: span 8;
}
.col-9,
.xs\=col-9 {
  grid-column: span 9;
}
.col-10,
.xs\=col-10 {
  grid-column: span 10;
}
.col-11,
.xs\=col-11 {
  grid-column: span 11;
}
.col-12,
.xs\=col-12 {
  grid-column: span 12;
}

@media only screen and (min-width: 48em) {
  .col-row {
    max-width: 48em;
  }

  /*
    SMALL
  */
  .sm\=col-1 {
    grid-column: span 1;
  }
  .sm\=col-2 {
    grid-column: span 2;
  }
  .sm\=col-3 {
    grid-column: span 3;
  }
  .sm\=col-4 {
    grid-column: span 4;
  }
  .sm\=col-5 {
    grid-column: span 5;
  }
  .sm\=col-6 {
    grid-column: span 6;
  }
  .sm\=col-7 {
    grid-column: span 7;
  }
  .sm\=col-8 {
    grid-column: span 8;
  }
  .sm\=col-9 {
    grid-column: span 9;
  }
  .sm\=col-10 {
    grid-column: span 10;
  }
  .sm\=col-11 {
    grid-column: span 11;
  }
  .sm\=col-12 {
    grid-column: span 12;
  }

  .sm\=col-top {
    align-self: start;
  }
  .sm\=col-center {
    align-self: center;
  }
  .sm\=col-bottom {
    align-self: end;
  }
  .sm\=col-stretch {
    align-self: stretch;
  }

}

@media only screen and (min-width: 64em) {
  .col-row {
    max-width: 64em;
  }

  /*
    MEDIUM
  */
  .md\=col-1 {
    grid-column: span 1;
  }
  .md\=col-2 {
    grid-column: span 2;
  }
  .md\=col-3 {
    grid-column: span 3;
  }
  .md\=col-4 {
    grid-column: span 4;
  }
  .md\=col-5 {
    grid-column: span 5;
  }
  .md\=col-6 {
    grid-column: span 6;
  }
  .md\=col-7 {
    grid-column: span 7;
  }
  .md\=col-8 {
    grid-column: span 8;
  }
  .md\=col-9 {
    grid-column: span 9;
  }
  .md\=col-10 {
    grid-column: span 10;
  }
  .md\=col-11 {
    grid-column: span 11;
  }
  .md\=col-12 {
    grid-column: span 12;
  }

  .md\=col-top {
    align-self: start;
  }
  .md\=col-center {
    align-self: center;
  }
  .md\=col-bottom {
    align-self: end;
  }
  .md\=col-stretch {
    align-self: stretch;
  }
}

@media only screen and (min-width: 75em) {
  .col-row {
    max-width: 75em;
  }

  /*
    LARGE
  */
  .lg\=col-1 {
    grid-column: span 1;
  }
  .lg\=col-2 {
    grid-column: span 2;
  }
  .lg\=col-3 {
    grid-column: span 3;
  }
  .lg\=col-4 {
    grid-column: span 4;
  }
  .lg\=col-5 {
    grid-column: span 5;
  }
  .lg\=col-6 {
    grid-column: span 6;
  }
  .lg\=col-7 {
    grid-column: span 7;
  }
  .lg\=col-8 {
    grid-column: span 8;
  }
  .lg\=col-9 {
    grid-column: span 9;
  }
  .lg\=col-10 {
    grid-column: span 10;
  }
  .lg\=col-11 {
    grid-column: span 11;
  }
  .lg\=col-12 {
    grid-column: span 12;
  }

  .lg\=col-top {
    align-self: start;
  }
  .lg\=col-center {
    align-self: center;
  }
  .lg\=col-bottom {
    align-self: end;
  }
  .lg\=col-stretch {
    align-self: stretch;
  }

}

.col-fluid {
  max-width: 100vw;
}