.row {
    height: 100%;

    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    margin: var(--row-margin);
}
.row > .col {
    width: 100%;
    padding: var(--col-padding);
    box-sizing: border-box;
}

@media screen and (max-width: 960px) {
    .row--reverse-mobile {
        flex-direction: column-reverse;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-1 {
        width: 8.3333333333%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-2 {
        width: 16.6666666667%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-3 {
        width: 25%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-4 {
        width: 33.3333333333%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-5 {
        width: 41.6666666667%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-6 {
        width: 50%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-7 {
        width: 58.3333333333%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-8 {
        width: 66.6666666667%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-9 {
        width: 75%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-10 {
        width: 83.3333333333%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-11 {
        width: 91.6666666667%;
    }
}
@media screen and (min-width: 1px) {
    .row > .xs-12 {
        width: 100%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-1 {
        width: 8.3333333333%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-2 {
        width: 16.6666666667%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-3 {
        width: 25%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-4 {
        width: 33.3333333333%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-5 {
        width: 41.6666666667%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-6 {
        width: 50%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-7 {
        width: 58.3333333333%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-8 {
        width: 66.6666666667%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-9 {
        width: 75%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-10 {
        width: 83.3333333333%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-11 {
        width: 91.6666666667%;
    }
}
@media screen and (min-width: 560px) {
    .row > .sm-12 {
        width: 100%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-1 {
        width: 8.3333333333%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-2 {
        width: 16.6666666667%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-3 {
        width: 25%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-4 {
        width: 33.3333333333%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-5 {
        width: 41.6666666667%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-6 {
        width: 50%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-7 {
        width: 58.3333333333%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-8 {
        width: 66.6666666667%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-9 {
        width: 75%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-10 {
        width: 83.3333333333%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-11 {
        width: 91.6666666667%;
    }
}
@media screen and (min-width: 960px) {
    .row > .md-12 {
        width: 100%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-1 {
        width: 8.3333333333%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-2 {
        width: 16.6666666667%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-3 {
        width: 25%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-4 {
        width: 33.3333333333%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-5 {
        width: 41.6666666667%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-6 {
        width: 50%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-7 {
        width: 58.3333333333%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-8 {
        width: 66.6666666667%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-9 {
        width: 75%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-10 {
        width: 83.3333333333%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-11 {
        width: 91.6666666667%;
    }
}
@media screen and (min-width: 1200px) {
    .row > .lg-12 {
        width: 100%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-1 {
        width: 8.3333333333%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-2 {
        width: 16.6666666667%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-3 {
        width: 25%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-4 {
        width: 33.3333333333%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-5 {
        width: 41.6666666667%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-6 {
        width: 50%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-7 {
        width: 58.3333333333%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-8 {
        width: 66.6666666667%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-9 {
        width: 75%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-10 {
        width: 83.3333333333%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-11 {
        width: 91.6666666667%;
    }
}
@media screen and (min-width: 1440px) {
    .row > .xl-12 {
        width: 100%;
    }
}