.grid-auto {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  row-gap: 20px;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
}

.grid-half {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
}

.grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
}

.grid-eight {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
}

.grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
}


.grid-six {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
}

.grid-nine {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: auto;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 28px;
}





@media (max-width: 989px) {
    .grid-auto {
        grid-template-columns:  minmax(0, 1fr)  minmax(0, 1fr);
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
    row-gap: 10px;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
}

    .grid-half {
        grid-template-columns:  minmax(0, 1fr);
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
    row-gap: 10px;
}

    .grid-eight {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-rows: auto;
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
    row-gap: 10px;
}

    .grid-four {
        display: grid;
        grid-template-columns:  minmax(0, 1fr)  minmax(0, 1fr);
        grid-auto-rows: auto;
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
    row-gap: 10px;

    }

    .grid-six {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
        row-gap: 10px;
        grid-auto-rows: -webkit-max-content;
        grid-auto-rows: max-content;
    }

    .grid-nine {
        display: grid;
        grid-template-columns:  minmax(0, 1fr)  minmax(0, 1fr);
        grid-auto-rows: auto;
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
        row-gap: 10px;
    }
}


@media (min-width: 990px) {
  .row-1 {
    grid-row: 1/2;
  }
  
  .start-0 {
      grid-column-start: 1;
      margin-left: var(--pagePadNeg)
  }
  .start-1 {
      grid-column-start: 1;
  }
  .start-2 {
      grid-column-start: 2;
  }
  .start-3 {
      grid-column-start: 3;
  }
  .start-4 {
      grid-column-start: 4;
  }
  .start-5 {
      grid-column-start: 5;
  }
  .start-6 {
      grid-column-start: 6;
  }
  .start-7 {
      grid-column-start: 7;
  }
  .start-8 {
      grid-column-start: 8;
  }
  .start-9 {
      grid-column-start: 9;
  }
  .start-10 {
      grid-column-start: 10;
  }
  .start-11 {
      grid-column-start: 11;
  }
  .start-12 {
      grid-column-start: 12;
  }
  
  
  
  .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;
  }
  .span-13 {
      grid-column-end: span 12;
      margin-right: var(--pagePadNeg);
  }
  
  
  .vertoff--10 {
      margin-top: -50vw;
  }
  
  .vertoff--9 {
      margin-top: -45vw;
  }
  
  .vertoff--8 {
      margin-top: -40vw;
  }
  
  .vertoff--7 {
      margin-top: -35vw;
  }
  
  .vertoff--6 {
      margin-top: -30vw;
  }
  
  .vertoff--5 {
      margin-top: -25vw;
  }
  
  .vertoff--4 {
      margin-top: -20vw;
  }
  
  .vertoff--3 {
      margin-top: -15vw;
  }
  
  .vertoff--2 {
      margin-top: -10vw;
  }
  
  .vertoff--1 {
      margin-top: -5vw;
  }
  
  .vertoff-0 {
      margin-top: 0;
  }
  
  .vertoff-1 {
      margin-top: 5vw;
  }
  
  .vertoff-2 {
      margin-top: 10vw;
  }
  
  .vertoff-3 {
      margin-top: 15vw;
  }
  
  .vertoff-4 {
      margin-top: 20vw;
  }
  
  .vertoff-5 {
      margin-top: 25vw;
  }
  
  .vertoff-6 {
      margin-top: 30vw;
  }
  
  .vertoff-7 {
      margin-top: 35vw;
  }
  
  .vertoff-8 {
      margin-top: 40vw;
  }
  
  .vertoff-9 {
      margin-top: 45vw;
  }
  
  .vertoff-10 {
      margin-top: 50vw;
  }
  
  
  
  
  .vertpad-0 {
     padding: 0;
  }
  
  .vertpad-1 {
     padding: 3vw 0;
  }
  
  .vepadff-2 {
     padding: 6vw 0;
  }
  
  .vertpad-3 {
     padding: 9vw 0;
  }
  
  .vertpad-4 {
     padding: 12vw 0;
  }
  
  .vertpad-5 {
     padding: 15vw 0;
  }
  
  .vertpad-6 {
     padding: 18vw 0;
  }
  
  .vertpad-7 {
     padding: 21vw 0;
  }
  
  .vertpad-8 {
     padding: 24vw 0;
  }
  
  .vertpad-9 {
     padding: 27vw 0;
  }
  
  .vertpad-10 {
     padding: 30vw 0;
  }
  }
  
  
   
  /* mobile */
  @media (max-width: 989px) {
    .m-row-1 {
        grid-row: 1/2;
    }

    .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-end: span 2;
    }
    
    .start-1, .start-2, .start-3, .start-4, .start-5, .start-6 , .start-7, .start-8, .start-9, .start-10, .start-11, .start-12  {
        grid-column-start: 1;
    }

    .m-span-1 {
        grid-column-end: span 1;
    }
    .m-span-2 {
        grid-column-end: span 2;
    }
    .m-span-3 {
        grid-column-end: span 3;
    }
    .m-span-4 {
        grid-column-end: span 4;
    }
    .m-span-5 {
        grid-column-end: span 5;
    }
    .m-span-6 {
        grid-column-end: span 6;
    }
    .m-span-7 {
        grid-column-end: span 7;
    } 
    .m-span-8 {
        grid-column-end: span 8;
    }

    .m-start-1 {
        grid-column-start: 1;
    }
    .m-start-2 {
        grid-column-start: 2;
    }
    .m-start-3 {
        grid-column-start: 3;
    }
    .m-start-4 {
        grid-column-start: 4;
    }
    .m-start-5 {
        grid-column-start: 5;
    }
    .m-start-6 {
        grid-column-start: 6;
    }
    .m-start-7 {
        grid-column-start: 7;
    } 
    .m-start-8 {
        grid-column-start: 8;
    }

}