:root{
  --col-12: 100%;
  --col-11: 91,66%;
  --col-10: 83.33%;
  --col-9: 75%;
  --col-8: 66.66%;
  --col-7: 58.33%;
  --col-6: 50%;
  --col-5: 41.66%;
  --col-4: 33.33%;
  --col-3: 25%;
  --col-2: 16.66%;
  --col-1: 8.33%;
  --col-0: 0;
}

/*Desktop only display*/
@media screen and (orientation: landscape){

  .col-0{
    width: var(--col-0);
    display: none;
  }

  .col-12{
    width: var(--col-12);
  }

  .col-11{
    width: var(--col-11);
  }

  .col-10{
    width: var(--col-10);
  }

  .col-9{
    width: var(--col-9);
  }

  .col-8{
    width: var(--col-8);
  }

  .col-7{
    width: var(--col-7)
  }

  .col-6{
    width: var(--col-6);
  }

  .col-5{
    width: var(--col-5);
  }

  .col-4{
    width: var(--col-4);
  }

  .col-3{
    width: var(--col-3);
  }

  .col-2{
    width: var(--col-2);
  }

  .col-1{
    width: var(--col-1);
  }
}

/*Mobile display*/
@media screen and (orientation: portrait){
.colm-0{
  width: 0;
  display: none;
}

.colm-12{
  width: 100%;
}

.colm-11{
  width: 91.66%;
}

.colm-10{
  width: 83.33%;
}

.colm-9{
  width: 75%;
}

.colm-8{
  width: 66.66%;
}

.colm-7{
  width: 58.33%;
}

.colm-6{
  width: 50%;
}

.colm-5{
  width: 41.66%;
}

.colm-4{
  width: 33.33%;
}

.colm-3{
  width: 25%;
}

.colm-2{
  width: 16.66%;
}

.colm-1{
  width: 8.33%;
}
}