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

@media screen and (min-width: 600px) {
  .input-element.span-1 {
    grid-column-end: span 1;
  }
  .input-element.span-2 {
    grid-column-end: span 2;
  }
  .input-element.span-3 {
    grid-column-end: span 3;
  }
  .input-element.span-4 {
    grid-column-end: span 4;
  }
  .input-element.span-5 {
    grid-column-end: span 5;
  }
  .input-element.span-6 {
    grid-column-end: span 6;
  }
  .input-element.span-7 {
    grid-column-end: span 7;
  }
  .input-element.span-8 {
    grid-column-end: span 8;
  }
  .input-element.span-9 {
    grid-column-end: span 9;
  }
  .input-element.span-10 {
    grid-column-end: span 10;
  }
  .input-element.span-11 {
    grid-column-end: span 11;
  }
  .input-element.span-12 {
    grid-column-end: span 12;
  }

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

@media screen and (min-width: 800px) {
  .span-1 {
    grid-column-end: span 1;
  }
  .span-2 {
    grid-column-end: span 2;
  }
  .span-3 {
    grid-column-end: span 3;
  }
  .span-4 {
    grid-column-end: span 4;
  }
  .span-5 {
    grid-column-end: span 5;
  }
  .span-6 {
    grid-column-end: span 6;
  }
  .span-7 {
    grid-column-end: span 7;
  }
  .span-8 {
    grid-column-end: span 8;
  }
  .span-9 {
    grid-column-end: span 9;
  }
  .span-10 {
    grid-column-end: span 10;
  }
  .span-11 {
    grid-column-end: span 11;
  }
  .span-12 {
    grid-column-end: span 12;
  }

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