:root{--sm:576px;--md:768px;--lg:992px;--xl:1200px}.container{--columns:12;--gutter:20px;--container:1600px}.container:not(.fluid){margin:0 auto;max-width:var(--container)}@media(min-width:567px)and (max-width:992px){.container{--columns:6}}@media(max-width:567px){.container{--columns:4}}.container .row{box-sizing:border-box;display:flex;flex-wrap:wrap}.container .col{margin-left:calc(var(--gutter)/2);margin-right:calc(var(--gutter)/2)}@media(min-width:567px){.container .col:not([class*=col-]){flex:1 0}}@media(max-width:567px){.container .col{width:100%}}@media(min-width:992px){.container .col-1{width:calc(100%/var(--columns)*1 - var(--gutter))}.container .col-2{width:calc(100%/var(--columns)*2 - var(--gutter))}.container .col-3{width:calc(100%/var(--columns)*3 - var(--gutter))}.container .col-4{width:calc(100%/var(--columns)*4 - var(--gutter))}.container .col-5{width:calc(100%/var(--columns)*5 - var(--gutter))}.container .col-6{width:calc(100%/var(--columns)*6 - var(--gutter))}.container .col-7{width:calc(100%/var(--columns)*7 - var(--gutter))}.container .col-8{width:calc(100%/var(--columns)*8 - var(--gutter))}.container .col-9{width:calc(100%/var(--columns)*9 - var(--gutter))}.container .col-10{width:calc(100%/var(--columns)*10 - var(--gutter))}.container .col-11{width:calc(100%/var(--columns)*11 - var(--gutter))}.container .col-12{width:calc(100%/var(--columns)*12 - var(--gutter))}}@media(min-width:567px)and (max-width:992px){.container .col-1{width:calc(50%/var(--columns)*1 - var(--gutter))}.container .col-2{width:calc(50%/var(--columns)*2 - var(--gutter))}.container .col-3{width:calc(50%/var(--columns)*3 - var(--gutter))}.container .col-4{width:calc(50%/var(--columns)*4 - var(--gutter))}.container .col-5{width:calc(50%/var(--columns)*5 - var(--gutter))}.container .col-6{width:calc(50%/var(--columns)*6 - var(--gutter))}.container .col-7{width:calc(50%/var(--columns)*7 - var(--gutter))}.container .col-8{width:calc(50%/var(--columns)*8 - var(--gutter))}.container .col-9{width:calc(50%/var(--columns)*9 - var(--gutter))}.container .col-10{width:calc(50%/var(--columns)*10 - var(--gutter))}.container .col-11{width:calc(50%/var(--columns)*11 - var(--gutter))}.container .col-12{width:calc(50%/var(--columns)*12 - var(--gutter))}.container .col-md-1{width:calc(100%/var(--columns)*1 - var(--gutter))}.container .col-md-2{width:calc(100%/var(--columns)*2 - var(--gutter))}.container .col-md-3{width:calc(100%/var(--columns)*3 - var(--gutter))}.container .col-md-4{width:calc(100%/var(--columns)*4 - var(--gutter))}.container .col-md-5{width:calc(100%/var(--columns)*5 - var(--gutter))}.container .col-md-6{width:calc(100%/var(--columns)*6 - var(--gutter))}.container .col-md-7{width:calc(100%/var(--columns)*7 - var(--gutter))}.container .col-md-8{width:calc(100%/var(--columns)*8 - var(--gutter))}.container .col-md-9{width:calc(100%/var(--columns)*9 - var(--gutter))}.container .col-md-10{width:calc(100%/var(--columns)*10 - var(--gutter))}.container .col-md-11{width:calc(100%/var(--columns)*11 - var(--gutter))}.container .col-md-12{width:calc(100%/var(--columns)*12 - var(--gutter))}}@media(max-width:567px){.container .col-sm-1{width:calc(100%/var(--columns)*1 - var(--gutter))}.container .col-sm-2{width:calc(100%/var(--columns)*2 - var(--gutter))}.container .col-sm-3{width:calc(100%/var(--columns)*3 - var(--gutter))}.container .col-sm-4{width:calc(100%/var(--columns)*4 - var(--gutter))}.container .col-sm-5{width:calc(100%/var(--columns)*5 - var(--gutter))}.container .col-sm-6{width:calc(100%/var(--columns)*6 - var(--gutter))}.container .col-sm-7{width:calc(100%/var(--columns)*7 - var(--gutter))}.container .col-sm-8{width:calc(100%/var(--columns)*8 - var(--gutter))}.container .col-sm-9{width:calc(100%/var(--columns)*9 - var(--gutter))}.container .col-sm-10{width:calc(100%/var(--columns)*10 - var(--gutter))}.container .col-sm-11{width:calc(100%/var(--columns)*11 - var(--gutter))}.container .col-sm-12{width:calc(100%/var(--columns)*12 - var(--gutter))}}@media(min-width:992px){.container .offset-1{margin-left:calc(100%/var(--columns)*1 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-1{margin-left:calc(50%/var(--columns)*1 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-2{margin-left:calc(100%/var(--columns)*2 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-2{margin-left:calc(50%/var(--columns)*2 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-3{margin-left:calc(100%/var(--columns)*3 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-3{margin-left:calc(50%/var(--columns)*3 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-4{margin-left:calc(100%/var(--columns)*4 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-4{margin-left:calc(50%/var(--columns)*4 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-5{margin-left:calc(100%/var(--columns)*5 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-5{margin-left:calc(50%/var(--columns)*5 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-6{margin-left:calc(100%/var(--columns)*6 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-6{margin-left:calc(50%/var(--columns)*6 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-7{margin-left:calc(100%/var(--columns)*7 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-7{margin-left:calc(50%/var(--columns)*7 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-8{margin-left:calc(100%/var(--columns)*8 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-8{margin-left:calc(50%/var(--columns)*8 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-9{margin-left:calc(100%/var(--columns)*9 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-9{margin-left:calc(50%/var(--columns)*9 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-10{margin-left:calc(100%/var(--columns)*10 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-10{margin-left:calc(50%/var(--columns)*10 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-11{margin-left:calc(100%/var(--columns)*11 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-11{margin-left:calc(50%/var(--columns)*11 + var(--gutter)/2)}}@media(min-width:992px){.container .offset-12{margin-left:calc(100%/var(--columns)*12 + var(--gutter)/2)}}@media(min-width:567px)and (max-width:992px){.container .offset-12{margin-left:calc(50%/var(--columns)*12 + var(--gutter)/2)}}.grid-lines{--columns:12;--gutter:40px;box-sizing:border-box;display:flex;flex-wrap:wrap;height:100%;inset:0;position:absolute}@media(min-width:567px)and (max-width:992px){.grid-lines{--columns:6}}@media(max-width:567px){.grid-lines{--columns:4}}.grid-lines span{background-color:rgba(0,0,0,.05);display:block;margin-left:calc(var(--gutter)/2);margin-right:calc(var(--gutter)/2);outline:1px solid red;width:calc(100%/var(--columns) - var(--gutter))}