@use "sass:math" as math;

$columns: 12; // Number of columns in the grid system

.fk-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
    flex-direction: row;
	position: relative;

/* [class^="fk-col-"] {
		&:last-child {
		  padding-right: 0;
		}
	  } */
}


@for $width from 1 through $columns {
	.fk-col-#{$width} {
		flex-basis: math.div($width, $columns) * 100%;
		padding-right: 15px; //GUTTER
		max-width: math.div($width, $columns) * 100% ;
	}  
}


@media(max-width: 555px) {
    .fk-row {
      flex-direction: column;
    }
	@for $width from 1 through $columns {
		.fk-col-#{$width} {
            max-width: 100%;
			flex-basis: 100%;
		}
	}
}