// Grid
$column_count: 12;
$column_gutter: 30;

// Breakpoints
$desktop-all: 481;
$desktop: 1200;
$tablet: 991;
$mobile: 767;
$mobile-small: 480;

// Avalanche
// @see github.com/colourgarden/avalanche
$av-widths: ($column_count);
$av-gutter: #{$column_gutter}px;
$av-enable-grid-center: true;
$av-enable-grid-middle: true;
$av-enable-grid-cell-center: true;
$av-enable-grid-rev: true;
$av-namespace: 'grid';
$av-element-name: 'col';
$av-width-class-namespace: 'grid__col--';
$av-breakpoints: (
'desktop-all': "screen and (min-width: #{$desktop-all}px)",
'desktop': "screen and (max-width: #{$desktop}px)",
'tablet': "screen and (max-width: #{$tablet}px)",
'mobile': "screen and (max-width: #{$mobile}px)",
'mobile-small': "screen and (max-width: #{$mobile-small}px)",
);

@import '~avalanche-css/_avalanche.scss';

@media screen and (max-width: #{$tablet}px) {
	.#{$av-width-class-namespace}#{$column_count}\/#{$column_count}--tablet {
		width: 100%;
	}
}

@media screen and (max-width: #{$mobile}px) {
	.#{$av-width-class-namespace}#{$column_count}\/#{$column_count}--mobile {
		width: 100%;
	}
}

@media screen and (min-width: #{$tablet + 1}px) {
	@for $number from 0 to $column_count {
		$class-name: #{$av-width-class-namespace}offset-#{$number}\/#{$column_count};

		.#{$class-name} {
			margin-left: percentage($number / $column_count);
		}
	}
}

@media screen and (max-width: #{$tablet}px) {
	@for $number from 0 to $column_count {
		$class-name: #{$av-width-class-namespace}offset-#{$number}\/#{$column_count}--tablet;

		.#{$class-name} {
			margin-left: percentage($number / $column_count);
		}
	}
}

@media screen and (max-width: #{$mobile}px) {
	@for $number from 0 to $column_count {
		$class-name: #{$av-width-class-namespace}offset-#{$number}\/#{$column_count}--mobile;

		.#{$class-name} {
			margin-left: percentage($number / $column_count);
		}
	}
}

.container {
	width: 100%;
	max-width: #{$desktop}px;
	margin: 0 auto;
}
