// IE fallback for CSS Grid
@mixin gridFallback($gap: null) {
	display: flex;
    flex-wrap: wrap;
    @if( $gap == null ) {
		$gap: var(--space-md);
	}

    margin: calc(#{$gap} * -1) 0 0 calc(#{$gap} * -1);

    > * {
        padding: #{$gap} 0 0 #{$gap};
        background-clip: content-box;
    }

    @supports (grid-area: auto) {
        margin: 0;

        > * {
            padding: 0;
            max-width: none!important;
        }
    }
}

@mixin column($width) {
	@if unit($width) != '%' {
		$width: $width * 100%;
	}
	flex-basis: #{$width};
    max-width: #{$width};
}

// Create a grid
.parent {
	@include gridFallback(var(--space-md));
	
	@supports (grid-area: auto) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--space-md);
    }
}

.child {
	background: var(--color-primary);
	height: 80px;
}

.one, .two {
	@include column(1/2);
	grid-column: span 2;
}

.three {
	@include column(1);
	grid-column: span 4;
}

// some basic style
body {
	padding: var(--space-md);
}