Skip to content

Instantly share code, notes, and snippets.

@PavelLaptev
Created July 28, 2019 13:51
Show Gist options
  • Save PavelLaptev/38f11634f9acf2770bb76ec39359e6a8 to your computer and use it in GitHub Desktop.
Save PavelLaptev/38f11634f9acf2770bb76ec39359e6a8 to your computer and use it in GitHub Desktop.
.grid {
box-sizing: border-box;
display: flex;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
max-width: 1400px;
width: 88.5714285714%;
}
@media screen and (max-width: 1020px) {
.grid {
width: 88.2352941176%;
}
}
@media screen and (max-width: 620px) {
.grid {
width: 89.6774193548%;
}
}
.grid-0 {
box-sizing: border-box;
display: flex;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
max-width: 1400px;
width: 100%;
}
.col-desk-0 {
box-sizing: border-box;
width: 0%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-0 {
margin-left: 0%;
}
.col-desk-1 {
box-sizing: border-box;
width: 8.3333333333%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-1 {
margin-left: 8.3333333333%;
}
.col-desk-2 {
box-sizing: border-box;
width: 16.6666666667%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-2 {
margin-left: 16.6666666667%;
}
.col-desk-3 {
box-sizing: border-box;
width: 25%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-3 {
margin-left: 25%;
}
.col-desk-4 {
box-sizing: border-box;
width: 33.3333333333%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-4 {
margin-left: 33.3333333333%;
}
.col-desk-5 {
box-sizing: border-box;
width: 41.6666666667%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-5 {
margin-left: 41.6666666667%;
}
.col-desk-6 {
box-sizing: border-box;
width: 50%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-6 {
margin-left: 50%;
}
.col-desk-7 {
box-sizing: border-box;
width: 58.3333333333%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-7 {
margin-left: 58.3333333333%;
}
.col-desk-8 {
box-sizing: border-box;
width: 66.6666666667%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-8 {
margin-left: 66.6666666667%;
}
.col-desk-9 {
box-sizing: border-box;
width: 75%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-9 {
margin-left: 75%;
}
.col-desk-10 {
box-sizing: border-box;
width: 83.3333333333%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-10 {
margin-left: 83.3333333333%;
}
.col-desk-11 {
box-sizing: border-box;
width: 91.6666666667%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-11 {
margin-left: 91.6666666667%;
}
.col-desk-12 {
box-sizing: border-box;
width: 100%;
padding-left: 1.6129032258%;
padding-right: 1.6129032258%;
}
.col-desk-shift-12 {
margin-left: 100%;
}
@media screen and (max-width: 1020px) {
.col-tab-0 {
box-sizing: border-box;
width: 0%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-0 {
margin-left: 0%;
}
.col-tab-1 {
box-sizing: border-box;
width: 8.3333333333%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-1 {
margin-left: 8.3333333333%;
}
.col-tab-2 {
box-sizing: border-box;
width: 16.6666666667%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-2 {
margin-left: 16.6666666667%;
}
.col-tab-3 {
box-sizing: border-box;
width: 25%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-3 {
margin-left: 25%;
}
.col-tab-4 {
box-sizing: border-box;
width: 33.3333333333%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-4 {
margin-left: 33.3333333333%;
}
.col-tab-5 {
box-sizing: border-box;
width: 41.6666666667%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-5 {
margin-left: 41.6666666667%;
}
.col-tab-6 {
box-sizing: border-box;
width: 50%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-6 {
margin-left: 50%;
}
.col-tab-7 {
box-sizing: border-box;
width: 58.3333333333%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-7 {
margin-left: 58.3333333333%;
}
.col-tab-8 {
box-sizing: border-box;
width: 66.6666666667%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-8 {
margin-left: 66.6666666667%;
}
.col-tab-9 {
box-sizing: border-box;
width: 75%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-9 {
margin-left: 75%;
}
.col-tab-10 {
box-sizing: border-box;
width: 83.3333333333%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-10 {
margin-left: 83.3333333333%;
}
.col-tab-11 {
box-sizing: border-box;
width: 91.6666666667%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-11 {
margin-left: 91.6666666667%;
}
.col-tab-12 {
box-sizing: border-box;
width: 100%;
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
.col-tab-shift-12 {
margin-left: 100%;
}
}
@media screen and (max-width: 620px) {
.col-mob-0 {
box-sizing: border-box;
width: 0%;
padding-left: 1.7985611511%;
padding-right: 1.7985611511%;
}
.col-mob-shift-0 {
margin-left: 0%;
}
.col-mob-1 {
box-sizing: border-box;
width: 25%;
padding-left: 1.7985611511%;
padding-right: 1.7985611511%;
}
.col-mob-shift-1 {
margin-left: 25%;
}
.col-mob-2 {
box-sizing: border-box;
width: 50%;
padding-left: 1.7985611511%;
padding-right: 1.7985611511%;
}
.col-mob-shift-2 {
margin-left: 50%;
}
.col-mob-3 {
box-sizing: border-box;
width: 75%;
padding-left: 1.7985611511%;
padding-right: 1.7985611511%;
}
.col-mob-shift-3 {
margin-left: 75%;
}
.col-mob-4 {
box-sizing: border-box;
width: 100%;
padding-left: 1.7985611511%;
padding-right: 1.7985611511%;
}
.col-mob-shift-4 {
margin-left: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment