/* grid */
.container {
	width: 100%;
	max-width: var(--grid-max-width);
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0px 15px;
}

section {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.row {
	width: 100%;
	display: flex;
	flex: auto;
	flex-wrap: wrap;
	flex-direction: row;
	margin-left: calc(0px - var(--grid-gap) / 2);
	margin-right: calc(0px - var(--grid-gap) / 2);
}

.column {
	display: flex;
	flex-direction: row;
	padding-left: calc(var(--grid-gap) / 2);
	padding-right: calc(var(--grid-gap) / 2);
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.content {
	width: 100%;
}

[data-xl-width="1"] {
    width: calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
    flex-basis: calc(100% / 12 * 1);
}
[data-xl-width="2"] {
    width: calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
    flex-basis: calc(100% / 12 * 2);
}
[data-xl-width="3"] {
    width: calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
    flex-basis: calc(100% / 12 * 3);
}
[data-xl-width="4"] {
    width: calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
    flex-basis: calc(100% / 12 * 4);
}
[data-xl-width="5"] {
    width: calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
    flex-basis: calc(100% / 12 * 5);
}
[data-xl-width="6"] {
    width: calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
    flex-basis: calc(100% / 12 * 6);
}
[data-xl-width="7"] {
    width: calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
    flex-basis: calc(100% / 12 * 7);
}
[data-xl-width="8"] {
    width: calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
    flex-basis: calc(100% / 12 * 8);
}
[data-xl-width="9"] {
    width: calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
    flex-basis: calc(100% / 12 * 9);
}
[data-xl-width="10"] {
    width: calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
    flex-basis: calc(100% / 12 * 10);
}
[data-xl-width="11"] {
    width: calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
    flex-basis: calc(100% / 12 * 11);
}
[data-xl-width="12"] {
    width: calc(100% / 12 * 12);
    max-width: calc(100% / 12 * 12);
    flex-basis: calc(100% / 12 * 12);
}

@media screen and (min-width: 992px) and (max-width: 1169.98px) {
    [data-lg-width="1"] {
        width: calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
        flex-basis: calc(100% / 12 * 1);
    }
    [data-lg-width="2"] {
        width: calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
        flex-basis: calc(100% / 12 * 2);
    }
    [data-lg-width="3"] {
        width: calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
        flex-basis: calc(100% / 12 * 3);
    }
    [data-lg-width="4"] {
        width: calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
        flex-basis: calc(100% / 12 * 4);
    }
    [data-lg-width="5"] {
        width: calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
        flex-basis: calc(100% / 12 * 5);
    }
    [data-lg-width="6"] {
        width: calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
        flex-basis: calc(100% / 12 * 6);
    }
    [data-lg-width="7"] {
        width: calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
        flex-basis: calc(100% / 12 * 7);
    }
    [data-lg-width="8"] {
        width: calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
        flex-basis: calc(100% / 12 * 8);
    }
    [data-lg-width="9"] {
        width: calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
        flex-basis: calc(100% / 12 * 9);
    }
    [data-lg-width="10"] {
        width: calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
        flex-basis: calc(100% / 12 * 10);
    }
    [data-lg-width="11"] {
        width: calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
        flex-basis: calc(100% / 12 * 11);
    }
    [data-lg-width="12"] {
        width: calc(100% / 12 * 12);
        max-width: calc(100% / 12 * 12);
        flex-basis: calc(100% / 12 * 12);
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    [data-md-width="1"] {
        width: calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
        flex-basis: calc(100% / 12 * 1);
    }
    [data-md-width="2"] {
        width: calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
        flex-basis: calc(100% / 12 * 2);
    }
    [data-md-width="3"] {
        width: calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
        flex-basis: calc(100% / 12 * 3);
    }
    [data-md-width="4"] {
        width: calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
        flex-basis: calc(100% / 12 * 4);
    }
    [data-md-width="5"] {
        width: calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
        flex-basis: calc(100% / 12 * 5);
    }
    [data-md-width="6"] {
        width: calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
        flex-basis: calc(100% / 12 * 6);
    }
    [data-md-width="7"] {
        width: calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
        flex-basis: calc(100% / 12 * 7);
    }
    [data-md-width="8"] {
        width: calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
        flex-basis: calc(100% / 12 * 8);
    }
    [data-md-width="9"] {
        width: calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
        flex-basis: calc(100% / 12 * 9);
    }
    [data-md-width="10"] {
        width: calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
        flex-basis: calc(100% / 12 * 10);
    }
    [data-md-width="11"] {
        width: calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
        flex-basis: calc(100% / 12 * 11);
    }
    [data-md-width="12"] {
        width: calc(100% / 12 * 12);
        max-width: calc(100% / 12 * 12);
        flex-basis: calc(100% / 12 * 12);
    }
}

@media screen and (min-width: 544px) and (max-width: 767.98px) {
    [data-sm-width="1"] {
        width: calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
        flex-basis: calc(100% / 12 * 1);
    }
    [data-sm-width="2"] {
        width: calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
        flex-basis: calc(100% / 12 * 2);
    }
    [data-sm-width="3"] {
        width: calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
        flex-basis: calc(100% / 12 * 3);
    }
    [data-sm-width="4"] {
        width: calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
        flex-basis: calc(100% / 12 * 4);
    }
    [data-sm-width="5"] {
        width: calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
        flex-basis: calc(100% / 12 * 5);
    }
    [data-sm-width="6"] {
        width: calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
        flex-basis: calc(100% / 12 * 6);
    }
    [data-sm-width="7"] {
        width: calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
        flex-basis: calc(100% / 12 * 7);
    }
    [data-sm-width="8"] {
        width: calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
        flex-basis: calc(100% / 12 * 8);
    }
    [data-sm-width="9"] {
        width: calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
        flex-basis: calc(100% / 12 * 9);
    }
    [data-sm-width="10"] {
        width: calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
        flex-basis: calc(100% / 12 * 10);
    }
    [data-sm-width="11"] {
        width: calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
        flex-basis: calc(100% / 12 * 11);
    }
    [data-sm-width="12"] {
        width: calc(100% / 12 * 12);
        max-width: calc(100% / 12 * 12);
        flex-basis: calc(100% / 12 * 12);
    }
}

@media screen and (max-width: 543.98px) {
    [data-xs-width="1"] {
        width: calc(100% / 12 * 1);
        max-width: calc(100% / 12 * 1);
        flex-basis: calc(100% / 12 * 1);
    }
    [data-xs-width="2"] {
        width: calc(100% / 12 * 2);
        max-width: calc(100% / 12 * 2);
        flex-basis: calc(100% / 12 * 2);
    }
    [data-xs-width="3"] {
        width: calc(100% / 12 * 3);
        max-width: calc(100% / 12 * 3);
        flex-basis: calc(100% / 12 * 3);
    }
    [data-xs-width="4"] {
        width: calc(100% / 12 * 4);
        max-width: calc(100% / 12 * 4);
        flex-basis: calc(100% / 12 * 4);
    }
    [data-xs-width="5"] {
        width: calc(100% / 12 * 5);
        max-width: calc(100% / 12 * 5);
        flex-basis: calc(100% / 12 * 5);
    }
    [data-xs-width="6"] {
        width: calc(100% / 12 * 6);
        max-width: calc(100% / 12 * 6);
        flex-basis: calc(100% / 12 * 6);
    }
    [data-xs-width="7"] {
        width: calc(100% / 12 * 7);
        max-width: calc(100% / 12 * 7);
        flex-basis: calc(100% / 12 * 7);
    }
    [data-xs-width="8"] {
        width: calc(100% / 12 * 8);
        max-width: calc(100% / 12 * 8);
        flex-basis: calc(100% / 12 * 8);
    }
    [data-xs-width="9"] {
        width: calc(100% / 12 * 9);
        max-width: calc(100% / 12 * 9);
        flex-basis: calc(100% / 12 * 9);
    }
    [data-xs-width="10"] {
        width: calc(100% / 12 * 10);
        max-width: calc(100% / 12 * 10);
        flex-basis: calc(100% / 12 * 10);
    }
    [data-xs-width="11"] {
        width: calc(100% / 12 * 11);
        max-width: calc(100% / 12 * 11);
        flex-basis: calc(100% / 12 * 11);
    }
    [data-xs-width="12"] {
        width: calc(100% / 12 * 12);
        max-width: calc(100% / 12 * 12);
        flex-basis: calc(100% / 12 * 12);
    }
}



[data-offset="1"] {
	margin-left: calc(100% / 12 * 1);
}