scss grid

In this example below you will see how to do a scss grid with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by liorbabi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright liorbabi ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>scss grid</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/liorbabi/scss-grid-xqWvRe */
@media screen and (max-width: 575px) {
  .col-xs-1 {
    width: 8.3333333333%;
  }

  .col-xs-2 {
    width: 16.6666666667%;
  }

  .col-xs-3 {
    width: 25%;
  }

  .col-xs-4 {
    width: 33.3333333333%;
  }

  .col-xs-5 {
    width: 41.6666666667%;
  }

  .col-xs-6 {
    width: 50%;
  }

  .col-xs-7 {
    width: 58.3333333333%;
  }

  .col-xs-8 {
    width: 66.6666666667%;
  }

  .col-xs-9 {
    width: 75%;
  }

  .col-xs-10 {
    width: 83.3333333333%;
  }

  .col-xs-11 {
    width: 91.6666666667%;
  }

  .col-xs-12 {
    width: 100%;
  }

  .col-xs-1-p {
    width: 1%;
  }

  .col-xs-2-p {
    width: 2%;
  }

  .col-xs-3-p {
    width: 3%;
  }

  .col-xs-4-p {
    width: 4%;
  }

  .col-xs-5-p {
    width: 5%;
  }

  .col-xs-6-p {
    width: 6%;
  }

  .col-xs-7-p {
    width: 7%;
  }

  .col-xs-8-p {
    width: 8%;
  }

  .col-xs-9-p {
    width: 9%;
  }

  .col-xs-10-p {
    width: 10%;
  }

  .col-xs-11-p {
    width: 11%;
  }

  .col-xs-12-p {
    width: 12%;
  }

  .col-xs-13-p {
    width: 13%;
  }

  .col-xs-14-p {
    width: 14%;
  }

  .col-xs-15-p {
    width: 15%;
  }

  .col-xs-16-p {
    width: 16%;
  }

  .col-xs-17-p {
    width: 17%;
  }

  .col-xs-18-p {
    width: 18%;
  }

  .col-xs-19-p {
    width: 19%;
  }

  .col-xs-20-p {
    width: 20%;
  }

  .col-xs-21-p {
    width: 21%;
  }

  .col-xs-22-p {
    width: 22%;
  }

  .col-xs-23-p {
    width: 23%;
  }

  .col-xs-24-p {
    width: 24%;
  }

  .col-xs-25-p {
    width: 25%;
  }

  .col-xs-26-p {
    width: 26%;
  }

  .col-xs-27-p {
    width: 27%;
  }

  .col-xs-28-p {
    width: 28%;
  }

  .col-xs-29-p {
    width: 29%;
  }

  .col-xs-30-p {
    width: 30%;
  }

  .col-xs-31-p {
    width: 31%;
  }

  .col-xs-32-p {
    width: 32%;
  }

  .col-xs-33-p {
    width: 33%;
  }

  .col-xs-34-p {
    width: 34%;
  }

  .col-xs-35-p {
    width: 35%;
  }

  .col-xs-36-p {
    width: 36%;
  }

  .col-xs-37-p {
    width: 37%;
  }

  .col-xs-38-p {
    width: 38%;
  }

  .col-xs-39-p {
    width: 39%;
  }

  .col-xs-40-p {
    width: 40%;
  }

  .col-xs-41-p {
    width: 41%;
  }

  .col-xs-42-p {
    width: 42%;
  }

  .col-xs-43-p {
    width: 43%;
  }

  .col-xs-44-p {
    width: 44%;
  }

  .col-xs-45-p {
    width: 45%;
  }

  .col-xs-46-p {
    width: 46%;
  }

  .col-xs-47-p {
    width: 47%;
  }

  .col-xs-48-p {
    width: 48%;
  }

  .col-xs-49-p {
    width: 49%;
  }

  .col-xs-50-p {
    width: 50%;
  }

  .col-xs-51-p {
    width: 51%;
  }

  .col-xs-52-p {
    width: 52%;
  }

  .col-xs-53-p {
    width: 53%;
  }

  .col-xs-54-p {
    width: 54%;
  }

  .col-xs-55-p {
    width: 55%;
  }

  .col-xs-56-p {
    width: 56%;
  }

  .col-xs-57-p {
    width: 57%;
  }

  .col-xs-58-p {
    width: 58%;
  }

  .col-xs-59-p {
    width: 59%;
  }

  .col-xs-60-p {
    width: 60%;
  }

  .col-xs-61-p {
    width: 61%;
  }

  .col-xs-62-p {
    width: 62%;
  }

  .col-xs-63-p {
    width: 63%;
  }

  .col-xs-64-p {
    width: 64%;
  }

  .col-xs-65-p {
    width: 65%;
  }

  .col-xs-66-p {
    width: 66%;
  }

  .col-xs-67-p {
    width: 67%;
  }

  .col-xs-68-p {
    width: 68%;
  }

  .col-xs-69-p {
    width: 69%;
  }

  .col-xs-70-p {
    width: 70%;
  }

  .col-xs-71-p {
    width: 71%;
  }

  .col-xs-72-p {
    width: 72%;
  }

  .col-xs-73-p {
    width: 73%;
  }

  .col-xs-74-p {
    width: 74%;
  }

  .col-xs-75-p {
    width: 75%;
  }

  .col-xs-76-p {
    width: 76%;
  }

  .col-xs-77-p {
    width: 77%;
  }

  .col-xs-78-p {
    width: 78%;
  }

  .col-xs-79-p {
    width: 79%;
  }

  .col-xs-80-p {
    width: 80%;
  }

  .col-xs-81-p {
    width: 81%;
  }

  .col-xs-82-p {
    width: 82%;
  }

  .col-xs-83-p {
    width: 83%;
  }

  .col-xs-84-p {
    width: 84%;
  }

  .col-xs-85-p {
    width: 85%;
  }

  .col-xs-86-p {
    width: 86%;
  }

  .col-xs-87-p {
    width: 87%;
  }

  .col-xs-88-p {
    width: 88%;
  }

  .col-xs-89-p {
    width: 89%;
  }

  .col-xs-90-p {
    width: 90%;
  }

  .col-xs-91-p {
    width: 91%;
  }

  .col-xs-92-p {
    width: 92%;
  }

  .col-xs-93-p {
    width: 93%;
  }

  .col-xs-94-p {
    width: 94%;
  }

  .col-xs-95-p {
    width: 95%;
  }

  .col-xs-96-p {
    width: 96%;
  }

  .col-xs-97-p {
    width: 97%;
  }

  .col-xs-98-p {
    width: 98%;
  }

  .col-xs-99-p {
    width: 99%;
  }

  .col-xs-100-p {
    width: 100%;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .col-sm-1 {
    width: 8.3333333333%;
  }

  .col-sm-2 {
    width: 16.6666666667%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.3333333333%;
  }

  .col-sm-5 {
    width: 41.6666666667%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-7 {
    width: 58.3333333333%;
  }

  .col-sm-8 {
    width: 66.6666666667%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-10 {
    width: 83.3333333333%;
  }

  .col-sm-11 {
    width: 91.6666666667%;
  }

  .col-sm-12 {
    width: 100%;
  }

  .col-sm-1-p {
    width: 1%;
  }

  .col-sm-2-p {
    width: 2%;
  }

  .col-sm-3-p {
    width: 3%;
  }

  .col-sm-4-p {
    width: 4%;
  }

  .col-sm-5-p {
    width: 5%;
  }

  .col-sm-6-p {
    width: 6%;
  }

  .col-sm-7-p {
    width: 7%;
  }

  .col-sm-8-p {
    width: 8%;
  }

  .col-sm-9-p {
    width: 9%;
  }

  .col-sm-10-p {
    width: 10%;
  }

  .col-sm-11-p {
    width: 11%;
  }

  .col-sm-12-p {
    width: 12%;
  }

  .col-sm-13-p {
    width: 13%;
  }

  .col-sm-14-p {
    width: 14%;
  }

  .col-sm-15-p {
    width: 15%;
  }

  .col-sm-16-p {
    width: 16%;
  }

  .col-sm-17-p {
    width: 17%;
  }

  .col-sm-18-p {
    width: 18%;
  }

  .col-sm-19-p {
    width: 19%;
  }

  .col-sm-20-p {
    width: 20%;
  }

  .col-sm-21-p {
    width: 21%;
  }

  .col-sm-22-p {
    width: 22%;
  }

  .col-sm-23-p {
    width: 23%;
  }

  .col-sm-24-p {
    width: 24%;
  }

  .col-sm-25-p {
    width: 25%;
  }

  .col-sm-26-p {
    width: 26%;
  }

  .col-sm-27-p {
    width: 27%;
  }

  .col-sm-28-p {
    width: 28%;
  }

  .col-sm-29-p {
    width: 29%;
  }

  .col-sm-30-p {
    width: 30%;
  }

  .col-sm-31-p {
    width: 31%;
  }

  .col-sm-32-p {
    width: 32%;
  }

  .col-sm-33-p {
    width: 33%;
  }

  .col-sm-34-p {
    width: 34%;
  }

  .col-sm-35-p {
    width: 35%;
  }

  .col-sm-36-p {
    width: 36%;
  }

  .col-sm-37-p {
    width: 37%;
  }

  .col-sm-38-p {
    width: 38%;
  }

  .col-sm-39-p {
    width: 39%;
  }

  .col-sm-40-p {
    width: 40%;
  }

  .col-sm-41-p {
    width: 41%;
  }

  .col-sm-42-p {
    width: 42%;
  }

  .col-sm-43-p {
    width: 43%;
  }

  .col-sm-44-p {
    width: 44%;
  }

  .col-sm-45-p {
    width: 45%;
  }

  .col-sm-46-p {
    width: 46%;
  }

  .col-sm-47-p {
    width: 47%;
  }

  .col-sm-48-p {
    width: 48%;
  }

  .col-sm-49-p {
    width: 49%;
  }

  .col-sm-50-p {
    width: 50%;
  }

  .col-sm-51-p {
    width: 51%;
  }

  .col-sm-52-p {
    width: 52%;
  }

  .col-sm-53-p {
    width: 53%;
  }

  .col-sm-54-p {
    width: 54%;
  }

  .col-sm-55-p {
    width: 55%;
  }

  .col-sm-56-p {
    width: 56%;
  }

  .col-sm-57-p {
    width: 57%;
  }

  .col-sm-58-p {
    width: 58%;
  }

  .col-sm-59-p {
    width: 59%;
  }

  .col-sm-60-p {
    width: 60%;
  }

  .col-sm-61-p {
    width: 61%;
  }

  .col-sm-62-p {
    width: 62%;
  }

  .col-sm-63-p {
    width: 63%;
  }

  .col-sm-64-p {
    width: 64%;
  }

  .col-sm-65-p {
    width: 65%;
  }

  .col-sm-66-p {
    width: 66%;
  }

  .col-sm-67-p {
    width: 67%;
  }

  .col-sm-68-p {
    width: 68%;
  }

  .col-sm-69-p {
    width: 69%;
  }

  .col-sm-70-p {
    width: 70%;
  }

  .col-sm-71-p {
    width: 71%;
  }

  .col-sm-72-p {
    width: 72%;
  }

  .col-sm-73-p {
    width: 73%;
  }

  .col-sm-74-p {
    width: 74%;
  }

  .col-sm-75-p {
    width: 75%;
  }

  .col-sm-76-p {
    width: 76%;
  }

  .col-sm-77-p {
    width: 77%;
  }

  .col-sm-78-p {
    width: 78%;
  }

  .col-sm-79-p {
    width: 79%;
  }

  .col-sm-80-p {
    width: 80%;
  }

  .col-sm-81-p {
    width: 81%;
  }

  .col-sm-82-p {
    width: 82%;
  }

  .col-sm-83-p {
    width: 83%;
  }

  .col-sm-84-p {
    width: 84%;
  }

  .col-sm-85-p {
    width: 85%;
  }

  .col-sm-86-p {
    width: 86%;
  }

  .col-sm-87-p {
    width: 87%;
  }

  .col-sm-88-p {
    width: 88%;
  }

  .col-sm-89-p {
    width: 89%;
  }

  .col-sm-90-p {
    width: 90%;
  }

  .col-sm-91-p {
    width: 91%;
  }

  .col-sm-92-p {
    width: 92%;
  }

  .col-sm-93-p {
    width: 93%;
  }

  .col-sm-94-p {
    width: 94%;
  }

  .col-sm-95-p {
    width: 95%;
  }

  .col-sm-96-p {
    width: 96%;
  }

  .col-sm-97-p {
    width: 97%;
  }

  .col-sm-98-p {
    width: 98%;
  }

  .col-sm-99-p {
    width: 99%;
  }

  .col-sm-100-p {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .col-md-1 {
    width: 8.3333333333%;
  }

  .col-md-2 {
    width: 16.6666666667%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.3333333333%;
  }

  .col-md-5 {
    width: 41.6666666667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.3333333333%;
  }

  .col-md-8 {
    width: 66.6666666667%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.3333333333%;
  }

  .col-md-11 {
    width: 91.6666666667%;
  }

  .col-md-12 {
    width: 100%;
  }

  .col-md-1-p {
    width: 1%;
  }

  .col-md-2-p {
    width: 2%;
  }

  .col-md-3-p {
    width: 3%;
  }

  .col-md-4-p {
    width: 4%;
  }

  .col-md-5-p {
    width: 5%;
  }

  .col-md-6-p {
    width: 6%;
  }

  .col-md-7-p {
    width: 7%;
  }

  .col-md-8-p {
    width: 8%;
  }

  .col-md-9-p {
    width: 9%;
  }

  .col-md-10-p {
    width: 10%;
  }

  .col-md-11-p {
    width: 11%;
  }

  .col-md-12-p {
    width: 12%;
  }

  .col-md-13-p {
    width: 13%;
  }

  .col-md-14-p {
    width: 14%;
  }

  .col-md-15-p {
    width: 15%;
  }

  .col-md-16-p {
    width: 16%;
  }

  .col-md-17-p {
    width: 17%;
  }

  .col-md-18-p {
    width: 18%;
  }

  .col-md-19-p {
    width: 19%;
  }

  .col-md-20-p {
    width: 20%;
  }

  .col-md-21-p {
    width: 21%;
  }

  .col-md-22-p {
    width: 22%;
  }

  .col-md-23-p {
    width: 23%;
  }

  .col-md-24-p {
    width: 24%;
  }

  .col-md-25-p {
    width: 25%;
  }

  .col-md-26-p {
    width: 26%;
  }

  .col-md-27-p {
    width: 27%;
  }

  .col-md-28-p {
    width: 28%;
  }

  .col-md-29-p {
    width: 29%;
  }

  .col-md-30-p {
    width: 30%;
  }

  .col-md-31-p {
    width: 31%;
  }

  .col-md-32-p {
    width: 32%;
  }

  .col-md-33-p {
    width: 33%;
  }

  .col-md-34-p {
    width: 34%;
  }

  .col-md-35-p {
    width: 35%;
  }

  .col-md-36-p {
    width: 36%;
  }

  .col-md-37-p {
    width: 37%;
  }

  .col-md-38-p {
    width: 38%;
  }

  .col-md-39-p {
    width: 39%;
  }

  .col-md-40-p {
    width: 40%;
  }

  .col-md-41-p {
    width: 41%;
  }

  .col-md-42-p {
    width: 42%;
  }

  .col-md-43-p {
    width: 43%;
  }

  .col-md-44-p {
    width: 44%;
  }

  .col-md-45-p {
    width: 45%;
  }

  .col-md-46-p {
    width: 46%;
  }

  .col-md-47-p {
    width: 47%;
  }

  .col-md-48-p {
    width: 48%;
  }

  .col-md-49-p {
    width: 49%;
  }

  .col-md-50-p {
    width: 50%;
  }

  .col-md-51-p {
    width: 51%;
  }

  .col-md-52-p {
    width: 52%;
  }

  .col-md-53-p {
    width: 53%;
  }

  .col-md-54-p {
    width: 54%;
  }

  .col-md-55-p {
    width: 55%;
  }

  .col-md-56-p {
    width: 56%;
  }

  .col-md-57-p {
    width: 57%;
  }

  .col-md-58-p {
    width: 58%;
  }

  .col-md-59-p {
    width: 59%;
  }

  .col-md-60-p {
    width: 60%;
  }

  .col-md-61-p {
    width: 61%;
  }

  .col-md-62-p {
    width: 62%;
  }

  .col-md-63-p {
    width: 63%;
  }

  .col-md-64-p {
    width: 64%;
  }

  .col-md-65-p {
    width: 65%;
  }

  .col-md-66-p {
    width: 66%;
  }

  .col-md-67-p {
    width: 67%;
  }

  .col-md-68-p {
    width: 68%;
  }

  .col-md-69-p {
    width: 69%;
  }

  .col-md-70-p {
    width: 70%;
  }

  .col-md-71-p {
    width: 71%;
  }

  .col-md-72-p {
    width: 72%;
  }

  .col-md-73-p {
    width: 73%;
  }

  .col-md-74-p {
    width: 74%;
  }

  .col-md-75-p {
    width: 75%;
  }

  .col-md-76-p {
    width: 76%;
  }

  .col-md-77-p {
    width: 77%;
  }

  .col-md-78-p {
    width: 78%;
  }

  .col-md-79-p {
    width: 79%;
  }

  .col-md-80-p {
    width: 80%;
  }

  .col-md-81-p {
    width: 81%;
  }

  .col-md-82-p {
    width: 82%;
  }

  .col-md-83-p {
    width: 83%;
  }

  .col-md-84-p {
    width: 84%;
  }

  .col-md-85-p {
    width: 85%;
  }

  .col-md-86-p {
    width: 86%;
  }

  .col-md-87-p {
    width: 87%;
  }

  .col-md-88-p {
    width: 88%;
  }

  .col-md-89-p {
    width: 89%;
  }

  .col-md-90-p {
    width: 90%;
  }

  .col-md-91-p {
    width: 91%;
  }

  .col-md-92-p {
    width: 92%;
  }

  .col-md-93-p {
    width: 93%;
  }

  .col-md-94-p {
    width: 94%;
  }

  .col-md-95-p {
    width: 95%;
  }

  .col-md-96-p {
    width: 96%;
  }

  .col-md-97-p {
    width: 97%;
  }

  .col-md-98-p {
    width: 98%;
  }

  .col-md-99-p {
    width: 99%;
  }

  .col-md-100-p {
    width: 100%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .col-lg-1 {
    width: 8.3333333333%;
  }

  .col-lg-2 {
    width: 16.6666666667%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.3333333333%;
  }

  .col-lg-5 {
    width: 41.6666666667%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.3333333333%;
  }

  .col-lg-8 {
    width: 66.6666666667%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.3333333333%;
  }

  .col-lg-11 {
    width: 91.6666666667%;
  }

  .col-lg-12 {
    width: 100%;
  }

  .col-lg-1-p {
    width: 1%;
  }

  .col-lg-2-p {
    width: 2%;
  }

  .col-lg-3-p {
    width: 3%;
  }

  .col-lg-4-p {
    width: 4%;
  }

  .col-lg-5-p {
    width: 5%;
  }

  .col-lg-6-p {
    width: 6%;
  }

  .col-lg-7-p {
    width: 7%;
  }

  .col-lg-8-p {
    width: 8%;
  }

  .col-lg-9-p {
    width: 9%;
  }

  .col-lg-10-p {
    width: 10%;
  }

  .col-lg-11-p {
    width: 11%;
  }

  .col-lg-12-p {
    width: 12%;
  }

  .col-lg-13-p {
    width: 13%;
  }

  .col-lg-14-p {
    width: 14%;
  }

  .col-lg-15-p {
    width: 15%;
  }

  .col-lg-16-p {
    width: 16%;
  }

  .col-lg-17-p {
    width: 17%;
  }

  .col-lg-18-p {
    width: 18%;
  }

  .col-lg-19-p {
    width: 19%;
  }

  .col-lg-20-p {
    width: 20%;
  }

  .col-lg-21-p {
    width: 21%;
  }

  .col-lg-22-p {
    width: 22%;
  }

  .col-lg-23-p {
    width: 23%;
  }

  .col-lg-24-p {
    width: 24%;
  }

  .col-lg-25-p {
    width: 25%;
  }

  .col-lg-26-p {
    width: 26%;
  }

  .col-lg-27-p {
    width: 27%;
  }

  .col-lg-28-p {
    width: 28%;
  }

  .col-lg-29-p {
    width: 29%;
  }

  .col-lg-30-p {
    width: 30%;
  }

  .col-lg-31-p {
    width: 31%;
  }

  .col-lg-32-p {
    width: 32%;
  }

  .col-lg-33-p {
    width: 33%;
  }

  .col-lg-34-p {
    width: 34%;
  }

  .col-lg-35-p {
    width: 35%;
  }

  .col-lg-36-p {
    width: 36%;
  }

  .col-lg-37-p {
    width: 37%;
  }

  .col-lg-38-p {
    width: 38%;
  }

  .col-lg-39-p {
    width: 39%;
  }

  .col-lg-40-p {
    width: 40%;
  }

  .col-lg-41-p {
    width: 41%;
  }

  .col-lg-42-p {
    width: 42%;
  }

  .col-lg-43-p {
    width: 43%;
  }

  .col-lg-44-p {
    width: 44%;
  }

  .col-lg-45-p {
    width: 45%;
  }

  .col-lg-46-p {
    width: 46%;
  }

  .col-lg-47-p {
    width: 47%;
  }

  .col-lg-48-p {
    width: 48%;
  }

  .col-lg-49-p {
    width: 49%;
  }

  .col-lg-50-p {
    width: 50%;
  }

  .col-lg-51-p {
    width: 51%;
  }

  .col-lg-52-p {
    width: 52%;
  }

  .col-lg-53-p {
    width: 53%;
  }

  .col-lg-54-p {
    width: 54%;
  }

  .col-lg-55-p {
    width: 55%;
  }

  .col-lg-56-p {
    width: 56%;
  }

  .col-lg-57-p {
    width: 57%;
  }

  .col-lg-58-p {
    width: 58%;
  }

  .col-lg-59-p {
    width: 59%;
  }

  .col-lg-60-p {
    width: 60%;
  }

  .col-lg-61-p {
    width: 61%;
  }

  .col-lg-62-p {
    width: 62%;
  }

  .col-lg-63-p {
    width: 63%;
  }

  .col-lg-64-p {
    width: 64%;
  }

  .col-lg-65-p {
    width: 65%;
  }

  .col-lg-66-p {
    width: 66%;
  }

  .col-lg-67-p {
    width: 67%;
  }

  .col-lg-68-p {
    width: 68%;
  }

  .col-lg-69-p {
    width: 69%;
  }

  .col-lg-70-p {
    width: 70%;
  }

  .col-lg-71-p {
    width: 71%;
  }

  .col-lg-72-p {
    width: 72%;
  }

  .col-lg-73-p {
    width: 73%;
  }

  .col-lg-74-p {
    width: 74%;
  }

  .col-lg-75-p {
    width: 75%;
  }

  .col-lg-76-p {
    width: 76%;
  }

  .col-lg-77-p {
    width: 77%;
  }

  .col-lg-78-p {
    width: 78%;
  }

  .col-lg-79-p {
    width: 79%;
  }

  .col-lg-80-p {
    width: 80%;
  }

  .col-lg-81-p {
    width: 81%;
  }

  .col-lg-82-p {
    width: 82%;
  }

  .col-lg-83-p {
    width: 83%;
  }

  .col-lg-84-p {
    width: 84%;
  }

  .col-lg-85-p {
    width: 85%;
  }

  .col-lg-86-p {
    width: 86%;
  }

  .col-lg-87-p {
    width: 87%;
  }

  .col-lg-88-p {
    width: 88%;
  }

  .col-lg-89-p {
    width: 89%;
  }

  .col-lg-90-p {
    width: 90%;
  }

  .col-lg-91-p {
    width: 91%;
  }

  .col-lg-92-p {
    width: 92%;
  }

  .col-lg-93-p {
    width: 93%;
  }

  .col-lg-94-p {
    width: 94%;
  }

  .col-lg-95-p {
    width: 95%;
  }

  .col-lg-96-p {
    width: 96%;
  }

  .col-lg-97-p {
    width: 97%;
  }

  .col-lg-98-p {
    width: 98%;
  }

  .col-lg-99-p {
    width: 99%;
  }

  .col-lg-100-p {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .col-xl-1 {
    width: 8.3333333333%;
  }

  .col-xl-2 {
    width: 16.6666666667%;
  }

  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.3333333333%;
  }

  .col-xl-5 {
    width: 41.6666666667%;
  }

  .col-xl-6 {
    width: 50%;
  }

  .col-xl-7 {
    width: 58.3333333333%;
  }

  .col-xl-8 {
    width: 66.6666666667%;
  }

  .col-xl-9 {
    width: 75%;
  }

  .col-xl-10 {
    width: 83.3333333333%;
  }

  .col-xl-11 {
    width: 91.6666666667%;
  }

  .col-xl-12 {
    width: 100%;
  }

  .col-xl-1-p {
    width: 1%;
  }

  .col-xl-2-p {
    width: 2%;
  }

  .col-xl-3-p {
    width: 3%;
  }

  .col-xl-4-p {
    width: 4%;
  }

  .col-xl-5-p {
    width: 5%;
  }

  .col-xl-6-p {
    width: 6%;
  }

  .col-xl-7-p {
    width: 7%;
  }

  .col-xl-8-p {
    width: 8%;
  }

  .col-xl-9-p {
    width: 9%;
  }

  .col-xl-10-p {
    width: 10%;
  }

  .col-xl-11-p {
    width: 11%;
  }

  .col-xl-12-p {
    width: 12%;
  }

  .col-xl-13-p {
    width: 13%;
  }

  .col-xl-14-p {
    width: 14%;
  }

  .col-xl-15-p {
    width: 15%;
  }

  .col-xl-16-p {
    width: 16%;
  }

  .col-xl-17-p {
    width: 17%;
  }

  .col-xl-18-p {
    width: 18%;
  }

  .col-xl-19-p {
    width: 19%;
  }

  .col-xl-20-p {
    width: 20%;
  }

  .col-xl-21-p {
    width: 21%;
  }

  .col-xl-22-p {
    width: 22%;
  }

  .col-xl-23-p {
    width: 23%;
  }

  .col-xl-24-p {
    width: 24%;
  }

  .col-xl-25-p {
    width: 25%;
  }

  .col-xl-26-p {
    width: 26%;
  }

  .col-xl-27-p {
    width: 27%;
  }

  .col-xl-28-p {
    width: 28%;
  }

  .col-xl-29-p {
    width: 29%;
  }

  .col-xl-30-p {
    width: 30%;
  }

  .col-xl-31-p {
    width: 31%;
  }

  .col-xl-32-p {
    width: 32%;
  }

  .col-xl-33-p {
    width: 33%;
  }

  .col-xl-34-p {
    width: 34%;
  }

  .col-xl-35-p {
    width: 35%;
  }

  .col-xl-36-p {
    width: 36%;
  }

  .col-xl-37-p {
    width: 37%;
  }

  .col-xl-38-p {
    width: 38%;
  }

  .col-xl-39-p {
    width: 39%;
  }

  .col-xl-40-p {
    width: 40%;
  }

  .col-xl-41-p {
    width: 41%;
  }

  .col-xl-42-p {
    width: 42%;
  }

  .col-xl-43-p {
    width: 43%;
  }

  .col-xl-44-p {
    width: 44%;
  }

  .col-xl-45-p {
    width: 45%;
  }

  .col-xl-46-p {
    width: 46%;
  }

  .col-xl-47-p {
    width: 47%;
  }

  .col-xl-48-p {
    width: 48%;
  }

  .col-xl-49-p {
    width: 49%;
  }

  .col-xl-50-p {
    width: 50%;
  }

  .col-xl-51-p {
    width: 51%;
  }

  .col-xl-52-p {
    width: 52%;
  }

  .col-xl-53-p {
    width: 53%;
  }

  .col-xl-54-p {
    width: 54%;
  }

  .col-xl-55-p {
    width: 55%;
  }

  .col-xl-56-p {
    width: 56%;
  }

  .col-xl-57-p {
    width: 57%;
  }

  .col-xl-58-p {
    width: 58%;
  }

  .col-xl-59-p {
    width: 59%;
  }

  .col-xl-60-p {
    width: 60%;
  }

  .col-xl-61-p {
    width: 61%;
  }

  .col-xl-62-p {
    width: 62%;
  }

  .col-xl-63-p {
    width: 63%;
  }

  .col-xl-64-p {
    width: 64%;
  }

  .col-xl-65-p {
    width: 65%;
  }

  .col-xl-66-p {
    width: 66%;
  }

  .col-xl-67-p {
    width: 67%;
  }

  .col-xl-68-p {
    width: 68%;
  }

  .col-xl-69-p {
    width: 69%;
  }

  .col-xl-70-p {
    width: 70%;
  }

  .col-xl-71-p {
    width: 71%;
  }

  .col-xl-72-p {
    width: 72%;
  }

  .col-xl-73-p {
    width: 73%;
  }

  .col-xl-74-p {
    width: 74%;
  }

  .col-xl-75-p {
    width: 75%;
  }

  .col-xl-76-p {
    width: 76%;
  }

  .col-xl-77-p {
    width: 77%;
  }

  .col-xl-78-p {
    width: 78%;
  }

  .col-xl-79-p {
    width: 79%;
  }

  .col-xl-80-p {
    width: 80%;
  }

  .col-xl-81-p {
    width: 81%;
  }

  .col-xl-82-p {
    width: 82%;
  }

  .col-xl-83-p {
    width: 83%;
  }

  .col-xl-84-p {
    width: 84%;
  }

  .col-xl-85-p {
    width: 85%;
  }

  .col-xl-86-p {
    width: 86%;
  }

  .col-xl-87-p {
    width: 87%;
  }

  .col-xl-88-p {
    width: 88%;
  }

  .col-xl-89-p {
    width: 89%;
  }

  .col-xl-90-p {
    width: 90%;
  }

  .col-xl-91-p {
    width: 91%;
  }

  .col-xl-92-p {
    width: 92%;
  }

  .col-xl-93-p {
    width: 93%;
  }

  .col-xl-94-p {
    width: 94%;
  }

  .col-xl-95-p {
    width: 95%;
  }

  .col-xl-96-p {
    width: 96%;
  }

  .col-xl-97-p {
    width: 97%;
  }

  .col-xl-98-p {
    width: 98%;
  }

  .col-xl-99-p {
    width: 99%;
  }

  .col-xl-100-p {
    width: 100%;
  }
}

Comments