[class*=' col-'],
[class^='col-'] {
    float: left;
    min-block-size: 1rem;
    &:first-child {
        margin-left: 0;
    }
    &.grid-container {
        margin-bottom: 0;
    }
}

.col-12 {
    float: none;
}

.grid-container {
    overflow-x: hidden;
}

.grid-row,
.fixed-grid-row {
    @extend .clearfix;
    inline-size: widthPerc(852, 840);
}
.colrow {
    @extend .clearfix;
}
@for $i from 1 through 12 {
    .col-#{$i} {
        @include grid-unit($i, 12, 12);
        margin-block-end: 12px;
    }
}
.alpha {
    margin-inline-start: 0 !important;
}

.writing-mode-vertical-rl {
    .grid-row.grid-row,
    .fixed-grid-row.fixed-grid-row {
        block-size: auto;
        inline-size: 100%;
    }
    [class*=' col-'],
    [class^='col-'] {
        &:first-child {
            margin-inline-start: 0;
            margin-block-end: 12px;
        }
        &:last-child {
            margin-inline-end: 0;
        }
    }
    .grid-row:last-child {
        [class*=' col-'],
        [class^='col-'] {
            margin-block-end: 0;
        }
    }
}

#icon-editor {
    .grid-row {
        @extend .clearfix;
        width: 100%;
    }
    @for $i from 1 through 12 {
        .col-#{$i} {
            @include grid-unit($i, 12);
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
    }
}

@media all and (max-width: 1600px) {
    //  @for $i from 1 through 12 {
    //    .box.col-#{$i} { @include grid-unit($i, 12); }
    //  }
}

@media all and (max-width: 1100px) {
    //  @for $i from 1 through 8 {
    //    .box.col-#{$i} { @include grid-unit($i, 8); }
    //  }
}

@media all and (max-width: 768px) {
    //  @for $i from 1 through 6 {
    //    .box.col-#{$i} { @include grid-unit($i, 6); }
    //  }
}