/*
# GRID
*/

.grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-gap50px {
  grid-gap: 50px;
}

.grid-gap10px {
  grid-gap: 10px;
}

/*---------------------------------------------------------*/
/*
# COLUMNS
*/

.c1 {
  grid-column: 1;
  -ms-grid-column: 1;
}

.c2 {
  grid-column: 2;
  -ms-grid-column: 2;
}

.c3 {
  grid-column: 3;
  -ms-grid-column: 3;
}

.c4 {
  grid-column: 4;
  -ms-grid-column: 4;
}

.c5 {
  grid-column: 5;
  -ms-grid-column: 5;
}

.c6 {
  grid-column: 6;
  -ms-grid-column: 6;
}

.c7 {
  grid-column: 7;
  -ms-grid-column: 7;
}

.c8 {
  grid-column: 8;
  -ms-grid-column: 8;
}

.c9 {
  grid-column: 9;
  -ms-grid-column: 9;
}

.c10 {
  grid-column: 10;
  -ms-grid-column: 10;
}

.c11 {
  grid-column: 11;
  -ms-grid-column: 11;
}

.c12 {
  grid-column: 12;
  -ms-grid-column: 12;
}

/*---------------------------------------------------------*/
/*
# SPANLENGTHS
*/

.l1 {
  grid-column: span 1;
  -ms-grid-column-span: 1;
}

.l2 {
  grid-column: span 2;
  -ms-grid-column-span: 2;
}

.l3 {
  grid-column: span 3;
  -ms-grid-column-span: 3;
}

.l4 {
  grid-column: span 4;
  -ms-grid-column-span: 4;
}

.l5 {
  grid-column: span 5;
  -ms-grid-column-span: 5;
}

.l6 {
  grid-column: span 6;
  -ms-grid-column-span: 6;
}

.l7 {
  grid-column: span 7;
  -ms-grid-column-span: 7;
}

.l8 {
  grid-column: span 8;
  -ms-grid-column-span: 8;
}

.l9 {
  grid-column: span 9;
  -ms-grid-column-span: 9;
}

.l10 {
  grid-column: span 10;
  -ms-grid-column-span: 10;
}

.l11 {
  grid-column: span 11;
  -ms-grid-column-span: 11;
}

.l12 {
  grid-column: span 12;
  -ms-grid-column-span: 12;
}


/*---------------------------------------------------------*/
/*
# RESPONSIVE BEHAVIOR
*/

@media only screen  
and (max-width: 1024px){

  .r1 {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    grid-gap: 10px;  
  }


  .r2 {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 10px;  
  }



  .r3 {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-gap: 10px;  
  }

  .r4 {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;  
  }

  .r6 {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;   
    grid-gap: 10px; 
  }

}