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

  .col {
    display: block;

    &.right {
      justify-self: end;
    }

    &.center {
      align-self: center;
    }

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

}

@media(max-width: 640px) {

  .grid.wrap640 {
    grid-template-columns: 1fr;
    margin-block: 1rem;

    .col {
      width: 100%;
      padding: 0;
      order: 1;
      margin-block: 0rem;
      grid-column: span 12 !important;
    }

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

}

@media(max-width: 768px) {

  .grid.wrap768 {
    grid-template-columns: 1fr;
    margin-block: 1rem;

    .col {
      width: 100%;
      padding: 0;
      order: 1;
      margin-block: 0rem;
      grid-column: span 12 !important;
    }

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

}