$col_margin: 2%;

.ce_gallery > ul {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after {
    clear: both;
  }

  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  & {
    *zoom: 1;
  }

  & > li {
    margin: 0 $col_margin $col_margin;
    float: left;

    &.col_first {
      clear: none;
    }

    &:first-child {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      float: none;
    }
  }

  &.cols_1 > li {
    float: none;
  }

  @for $i from 1 through 12 {
    &.cols_#{$i} > li:nth-child(1n+2) {
      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
    }
    &.cols_#{$i} > li:nth-child(#{$i}n+2) {
      margin-left: 0;
      clear: left;
    }
    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
      margin-right: 0;
    }
  }
}