.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;

  & .col {
    display: block;

    &.right {
      justify-self: end;
    }

    &.one.wide { grid-column: span 1; }
    &.two.wide { grid-column: span 2; }
    &.three.wide { grid-column: span 3; }
    &.four.wide { grid-column: span 4; }
    &.five.wide { grid-column: span 5; }
    &.six.wide { grid-column: span 6; }
    &.seven.wide { grid-column: span 7; }
    &.eight.wide { grid-column: span 8; }
    &.nine.wide { grid-column: span 9; }
    &.ten.wide { grid-column: span 10; }
    &.eleven.wide { grid-column: span 11; }
    &.twelve.wide { grid-column: span 12; }
  }

}

@media(max-width: 640px) {

  .grid.stackable {
    grid-template-columns: repeat(1, 1fr);

    .col {
      width: 100% !important;
      padding: 0 !important;
      order: 1;
      margin-bottom: 1em;
    }

    .col.stack-first {
      order: 0;
    }
  }

}