.grid {
	display:flex;
	box-sizing:border-box;
	flex-flow:row wrap;
}

.grid__cell {
	display:block;
	box-sizing:border-box;
	flex-grow: 1; 
	flex-shrink: 0;
	flex-basis: auto;
}

.grid__cell--order-1 {
	order:1;
}

.grid__cell--order-2 {
	order:2;
}

.grid--gutters {
	margin: -15px 0 0 -15px;
}

.grid--gutters > .grid__cell{
	padding: 15px 0 0 15px;
}

.grid--top {
	align-items: flex-start;
}
.grid--middle {
	align-items: center;
}
.grid--bottom {
	align-items: flex-end;
}
.grid--left {
	justify-content:flex-start;
}
.grid--center {
	justify-content:center;
}
.grid--right {
	justify-content:flex-end;
}
.grid--space-between {
	justify-content:space-between;
}
.grid--space-around {
	justify-content:space-around;
}
.grid--space-evenly {
	justify-content:space-evenly;
}

.grid--shrink > .grid__cell {
	flex-grow: 0; 
	flex-shrink: 1;
}

.grid--full > .grid__cell {
	flex-basis: 100%;
}

.grid--halves > .grid__cell {
	flex-basis: 50%;
}

.grid--thirds > .grid__cell {
	flex-basis: 33.333%;
}
.grid--fourths > .grid__cell {
	flex-basis: 25%;
}
.grid--fives > .grid__cell {
	flex-basis: 20%;
}
@media screen and (min-width:30em) {
	.grid--sm .grid__cell {
		flex-grow: 1; 
		flex-shrink: 0;
		flex-basis: auto;
	}

	.grid--sm-gutters {
		margin: -15px 0 0 -15px;
	}

	.grid--sm-gutters > .grid__cell{
		padding: 15px 0 0 15px;
	}

	.grid--sm-top {
		align-items: flex-start;
	}
	.grid--sm-middle {
		align-items: center;
	}
	.grid--sm-bottom {
		align-items: flex-end;
	}
	.grid--sm-left {
		justify-content:flex-start;
	}
	.grid--sm-center {
		justify-content:center;
	}
	.grid--sm-right {
		justify-content:flex-end;
	}
	.grid--sm-space-between {
		justify-content:space-between;
	}
	.grid--sm-space-around {
		justify-content:space-around;
	}
	.grid--sm-space-evenly {
		justify-content:space-evenly;
	}

	.grid--sm-shrink > .grid__cell {
		flex-grow: 0; 
		flex-shrink: 1;
	}

	.grid--sm-full > .grid__cell {
		flex-basis: 100%;
	}

	.grid--sm-halves > .grid__cell {
		flex-basis:  50%;
	}

	.grid--sm-thirds > .grid__cell {
		flex-basis: 33.333%;
	}

	.grid--sm-fourths > .grid__cell {
		flex-basis:  25%;
	}
	.grid--sm-fives > .grid__cell {
		flex-basis:  25%;
	}

}
@media screen and (min-width:48em) {
	.grid--md .grid__cell {
		flex: 1 0 auto;
	}

	.grid--md-gutters {
		margin: -15px 0 0 -15px;
	}

	.grid--md-gutters > .grid__cell{
		padding: 15px 0 0 15px;
	}

	.grid--md-top {
		align-items: flex-start;
	}
	.grid--md-middle {
		align-items: center;
	}
	.grid--md-bottom {
		align-items: flex-end;
	}
	.grid--md-left {
		justify-content:flex-start;
	}
	.grid--md-center {
		justify-content:center;
	}
	.grid--md-right {
		justify-content:flex-end;
	}
	.grid--md-space-between {
		justify-content:space-between;
	}
	.grid--md-space-around {
		justify-content:space-around;
	}
	.grid--md-space-evenly {
		justify-content:space-evenly;
	}

	.grid--md-shrink > .grid__cell {
		flex-grow: 0; 
		flex-shrink: 1;
	}

	.grid--md-full > .grid__cell {
		flex-basis: 100%;
	}

	.grid--md-halves > .grid__cell {
		flex-basis:  50%;
	}

	.grid--md-thirds > .grid__cell {
		flex-basis:  33.333%;
	}

	.grid--md-fourths > .grid__cell {
		flex-basis:  25%;
	}
	.grid--md-fives > .grid__cell {
		flex-basis:  20%;
	}

}
@media screen and (min-width:60em) {
	.grid--lg .grid__cell {
		flex: 1 0 auto;
	}

	.grid--lg-gutters {
		margin: -15px 0 0 -15px;
	}

	.grid--lg-gutters > .grid__cell{
		padding: 15px 0 0 15px;
	}

	.grid--lg-top {
		align-items: flex-start;
	}
	.grid--lg-middle {
		align-items: center;
	}
	.grid--lg-bottom {
		align-items: flex-end;
	}
	.grid--lg-left {
		justify-content:flex-start;
	}
	.grid--lg-center {
		justify-content:center;
	}
	.grid--lg-right {
		justify-content:flex-end;
	}
	.grid--lg-space-between {
		justify-content:space-between;
	}
	.grid--lg-space-around {
		justify-content:space-around;
	}
	.grid--lg-space-evenly {
		justify-content:space-evenly;
	}

	.grid--lg-shrink > .grid__cell {
		flex-grow: 0; 
		flex-shrink: 1;
	}

	.grid--lg-full > .grid__cell {
		flex-basis: 100%;
	}

	.grid--lg-halves > .grid__cell {
		flex-basis:  50%;
	}

	.grid--lg-thirds > .grid__cell {
		flex-basis:  33.333%;
	}

	.grid--lg-fourths > .grid__cell {
		flex-basis:  25%;
	}
	.grid--lg-fives > .grid__cell {
		flex-basis:  20%;
	}

}