.container {
max-width: 1400px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
} .row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
} [class*="col-"] {
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
} :root {
--col-1: 8.3333%;
--col-2: 16.6666%;
--col-3: 25%;
--col-4: 33.3333%;
--col-5: 41.6666%;
--col-6: 50%;
--col-7: 58.3333%;
--col-8: 66.6666%;
--col-9: 75%;
--col-10: 83.3333%;
--col-11: 91.6666%;
--col-12: 100%;
} .col-xs-1  { width: var(--col-1); }
.col-xs-2  { width: var(--col-2); }
.col-xs-3  { width: var(--col-3); }
.col-xs-4  { width: var(--col-4); }
.col-xs-5  { width: var(--col-5); }
.col-xs-6  { width: var(--col-6); }
.col-xs-7  { width: var(--col-7); }
.col-xs-8  { width: var(--col-8); }
.col-xs-9  { width: var(--col-9); }
.col-xs-10 { width: var(--col-10); }
.col-xs-11 { width: var(--col-11); }
.col-xs-12 { width: var(--col-12); } @media (min-width: 576px) {
.col-sm-1  { width: var(--col-1); }
.col-sm-2  { width: var(--col-2); }
.col-sm-3  { width: var(--col-3); }
.col-sm-4  { width: var(--col-4); }
.col-sm-5  { width: var(--col-5); }
.col-sm-6  { width: var(--col-6); }
.col-sm-7  { width: var(--col-7); }
.col-sm-8  { width: var(--col-8); }
.col-sm-9  { width: var(--col-9); }
.col-sm-10 { width: var(--col-10); }
.col-sm-11 { width: var(--col-11); }
.col-sm-12 { width: var(--col-12); }
} @media (min-width: 768px) {
.col-md-1  { width: var(--col-1); }
.col-md-2  { width: var(--col-2); }
.col-md-3  { width: var(--col-3); }
.col-md-4  { width: var(--col-4); }
.col-md-5  { width: var(--col-5); }
.col-md-6  { width: var(--col-6); }
.col-md-7  { width: var(--col-7); }
.col-md-8  { width: var(--col-8); }
.col-md-9  { width: var(--col-9); }
.col-md-10 { width: var(--col-10); }
.col-md-11 { width: var(--col-11); }
.col-md-12 { width: var(--col-12); }
} @media (min-width: 1024px) {
.col-lg-1  { width: var(--col-1); }
.col-lg-2  { width: var(--col-2); }
.col-lg-3  { width: var(--col-3); }
.col-lg-4  { width: var(--col-4); }
.col-lg-5  { width: var(--col-5); }
.col-lg-6  { width: var(--col-6); }
.col-lg-7  { width: var(--col-7); }
.col-lg-8  { width: var(--col-8); }
.col-lg-9  { width: var(--col-9); }
.col-lg-10 { width: var(--col-10); }
.col-lg-11 { width: var(--col-11); }
.col-lg-12 { width: var(--col-12); }
} @media (min-width: 1200px) {
.col-xl-1  { width: var(--col-1); }
.col-xl-2  { width: var(--col-2); }
.col-xl-3  { width: var(--col-3); }
.col-xl-4  { width: var(--col-4); }
.col-xl-5  { width: var(--col-5); }
.col-xl-6  { width: var(--col-6); }
.col-xl-7  { width: var(--col-7); }
.col-xl-8  { width: var(--col-8); }
.col-xl-9  { width: var(--col-9); }
.col-xl-10 { width: var(--col-10); }
.col-xl-11 { width: var(--col-11); }
.col-xl-12 { width: var(--col-12); }
}