* {
    box-sizing: border-box;
}

/* CSS Grid */
.container {
    margin:auto;
    padding: 0 1rem;
}
.container .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
    padding-left: 270px;
    padding-right: 270px;
}

.container .row [class*="col-"] {
    margin: 0 0.5rem;
}

.container .row .col-1 {
    width: calc(1 / 12 * 100% - 1rem);
}

.container .row .col-2 {
    width: calc(2 / 12 * 100% - 1rem);
}
.container .row .col-3 {
    width: calc(3 / 12 * 100% - 1rem);
}

.container .row .col-4 {
    width: calc(4 / 12 * 100% - 1rem);
}
.container .row .col-5 {
    width: calc(5 / 12 * 100% - 1rem);
}

.container .row .col-6 {
    width: calc(6 / 12 * 100% - 1rem);
}
.container .row .col-7 {
    width: calc(7 / 12 * 100% - 1rem);
}

.container .row .col-8 {
    width: calc(8 / 12 * 100% - 1rem);
}
.container .row .col-9 {
    width: calc(9 / 12 * 100% - 1rem);
}

.container .row .col-10 {
    width: calc(10 / 12 * 100% - 1rem);
}
.container .row .col-11 {
    width: calc(11 / 12 * 100% - 1rem);
}

.container .row .col-12 {
    width: calc(12 / 12 * 100% - 1rem);
}