$section: $prefix + 'section';
$row: $prefix + 'section-row';
$plugin-container: $prefix + 'plugin-container';

.#{$section} {
    display: flex;
    flex-wrap: wrap;
}

.#{$section} > .#{$plugin-container} {
    width: 100%;
}

.#{$row} > [data-cols="1"] {
    width: calc(100% / 12);
}
.#{$row} > [data-cols="2"] {
    width: calc(200% / 12);
}
.#{$row} > [data-cols="3"] {
    width: calc(300% / 12);
}
.#{$row} > [data-cols="4"] {
    width: calc(400% / 12);
}
.#{$row} > [data-cols="5"] {
    width: calc(500% / 12);
}
.#{$row} > [data-cols="6"] {
    width: calc(600% / 12);
}
.#{$row} > [data-cols="7"] {
    width: calc(700% / 12);
}
.#{$row} > [data-cols="8"] {
    width: calc(800% / 12);
}
.#{$row} > [data-cols="9"] {
    width: calc(900% / 12);
}
.#{$row} > [data-cols="10"] {
    width: calc(1000% / 12);
}
.#{$row} > [data-cols="11"] {
    width: calc(1100% / 12);
}
.#{$row} > [data-cols="12"] {
    width: calc(1200% / 12);
}

@media (min-width: 480px) {
    
    .#{$row} > [data-cols-md="1"] {
        width: calc(100% / 12);
    }
    .#{$row} > [data-cols-md="2"] {
        width: calc(200% / 12);
    }
    .#{$row} > [data-cols-md="3"] {
        width: calc(300% / 12);
    }
    .#{$row} > [data-cols-md="4"] {
        width: calc(400% / 12);
    }
    .#{$row} > [data-cols-md="5"] {
        width: calc(500% / 12);
    }
    .#{$row} > [data-cols-md="6"] {
        width: calc(600% / 12);
    }
    .#{$row} > [data-cols-md="7"] {
        width: calc(700% / 12);
    }
    .#{$row} > [data-cols-md="8"] {
        width: calc(800% / 12);
    }
    .#{$row} > [data-cols-md="9"] {
        width: calc(900% / 12);
    }
    .#{$row} > [data-cols-md="10"] {
        width: calc(1000% / 12);
    }
    .#{$row} > [data-cols-md="11"] {
        width: calc(1100% / 12);
    }
    .#{$row} > [data-cols-md="12"] {
        width: calc(1200% / 12);
    }

}

@media (min-width: 992px) {
    
    .#{$row} > [data-cols-lg="1"] {
        width: calc(100% / 12);
    }
    .#{$row} > [data-cols-lg="2"] {
        width: calc(200% / 12);
    }
    .#{$row} > [data-cols-lg="3"] {
        width: calc(300% / 12);
    }
    .#{$row} > [data-cols-lg="4"] {
        width: calc(400% / 12);
    }
    .#{$row} > [data-cols-lg="5"] {
        width: calc(500% / 12);
    }
    .#{$row} > [data-cols-lg="6"] {
        width: calc(600% / 12);
    }
    .#{$row} > [data-cols-lg="7"] {
        width: calc(700% / 12);
    }
    .#{$row} > [data-cols-lg="8"] {
        width: calc(800% / 12);
    }
    .#{$row} > [data-cols-lg="9"] {
        width: calc(900% / 12);
    }
    .#{$row} > [data-cols-lg="10"] {
        width: calc(1000% / 12);
    }
    .#{$row} > [data-cols-lg="11"] {
        width: calc(1100% / 12);
    }
    .#{$row} > [data-cols-lg="12"] {
        width: calc(1200% / 12);
    }
}