display: block;
.container
display: flex;
.container
.row
width: calc(100% / 12 * X);
.container
.row
.col-1
.col-11
.row
.col-2
.col-10
.row
.col-3
.col-9
.row
.col-4
.col-8
.row
.col-5
.col-7
.row
.col-6
.col-6
.row
.col-4
.col-4
.col-4
.row
.col-3
.col-3
.col-3
.col-3
.row
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.row
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.row
.col-12
width: calc(98% / 12 * X);
margin-left: 2%;
.col-1
.col-11
.col-2
.col-10
.col-3
.col-9
.col-4
.col-8
.col-5
.col-7
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-12
margin-left: calc(100% / 12 * -X);
.col-2
.break-1
.col-3
.break-2
.col-4
.break-3
.col-5
.break-4
.col-6
.break-5
.col-7
.break-6
.col-8
.break-7
.col-9
.break-8
.col-10
.break-9
.col-11
.break-10
margin-left: calc(100% / 12 * X);
.push-1
.push-2
.push-3
.push-4
.push-5
.push-6
.push-7
.push-8
.push-9
.push-10
.push-11
height: calc(100vh / 12 * X);
.hi-1
.hi-11
.hi-2
.hi-10
.hi-3
.hi-9
.hi-4
.hi-8
.hi-5
.hi-7
.hi-6
.hi-6
.hi-4
.hi-4
.hi-4
.hi-3
.hi-3
.hi-3
.hi-3
.hi-2
.hi-2
.hi-2
.hi-2
.hi-2
.hi-2
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-1
.hi-12
margin-top: calc(100vh / 12 * -X);
.hi-2
.break-1
.hi-3
.break-2
.hi-4
.break-3
.hi-5
.break-4
.hi-6
.break-5
.hi-7
.break-6
.hi-8
.break-7
.hi-9
.break-8
.hi-10
.break-9
.hi-11
.break-10
.hi-12
.break-11