body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

[data-column_size='1'] {
    width: 8.333333333333333%;
}

[data-column_size='2'] {
    width: 16.66666666666667%;
}

[data-column_size='3'] {
    width: 25%;
}

[data-column_size='4'] {
    width: 33.33333333333333%;
}

[data-column_size='5'] {
    width: 41.66666666666667%;
}

[data-column_size='6'] {
    width: 50%;
}

[data-column_size='7'] {
    width: 58.33333333333333%;
}

[data-column_size='8'] {
    width: 66.66666666666666%;
}

[data-column_size='9'] {
    width: 75%;
}

[data-column_size='10'] {
    width: 83.33333333333333%;
}

[data-column_size='11'] {
    width: 91.66666666666666%;
}

[data-column_size='12'] {
    width: 100%;
}

.justify_between {
    justify-content: space-between;
}
.align_self_start {
    align-self: flex-start
}

.align_self_center {
    align-self: center
}

.align_self_end {
    align-self: flex-end
}

.align_stretch {
    align-items: stretch;
}

.align_start {
    align-items: flex-start;
}

.align_center {
    align-items: center;
}

.align_end {
    align-items: flex-end;
}

.justify_start {
    justify-content: flex-start
}

.justify_center {
    justify-content: center
}

.justify_end {
    justify-content: flex-end
}