// main: style.scss
/*---------------------------------------
* Equal row column width
 *-----------------------------------------*/
@for $i from 1 through 12 {
    .eq-row-col-#{$i} {
        margin-left: -15px;
        margin-right: -15px;
        &.eq-row-no-mg {
            padding-left: 15px;
            padding-right: 15px;
        }
        @include clearfixAfter();
        .eq-col {
            padding-left: 15px;
            padding-right: 15px;
        }
        @include for-screen( tablet-min ) {
            .eq-col {
                width: percentage( ( 12 /$i ) / 12  );
                float: left;
                &:nth-child(#{$i}n+1) {
                    clear: left;
                }
                &.col-border {
                    &:nth-child(#{$i}n) {
                        border-right: 0px none;
                    }
                    &:nth-child(n+#{$i+1}) {
                        border-top: 1px solid rgba(0,0,0,.07);
                    }
                }
            }
        };
        @include for-screen( tablet-max ) {
            .eq-col {
                width: 50%;
                float: left;
                &:nth-child(2n+1) {
                    clear: left;
                }
                &.col-border {
                    &:nth-child(2n) {
                        border-right: 0px none;
                    }
                    &:nth-child(n+#{$i+1}) {
                        border-top: 1px solid rgba(0, 0, 0, .07);
                    }
                }
            }
        };
        @include for-screen( small-phone-max ) {
            .eq-col {
                width: 100%;
                float: none;
                clear: left;
                &.col-border {
                    border-right: 0px none;
                }
            }
        };
    }
    .eq-row-col-no-f-#{$i} {
        margin-left: -15px;
        margin-right: -15px;
        .eq-col {
            padding-left: 15px;
            padding-right: 15px;
        }
        @include for-screen( tablet-min ) {
            .eq-col {
                width: percentage( ( 12 /$i ) / 12  );
            }
        };
        @include for-screen( tablet-max ) {
            .eq-col {
                width: 50%;
            }
        };
        @include for-screen( small-phone-max ) {
            .eq-col {
                width: 100%;
            }
        };
    }
}