
// Grid
// ––––––––––––––––––––––––––––––––––––––––––––––––––
@mixin container
	margin: 0 auto
	position: relative
	max-width: 110rem
	padding: 0 2.0rem;
	width: 100%

.grid 
	@include container

	$main-width: 70%
	$aside-width: 96% - $main-width

	& &__main
		width: $main-width
		float: left
		position: relative
	
	& &__aside
		width: $aside-width
		// background-color: $color-bright
		float: right
		position: relative

		display: flex
		flex-direction: column
		justify-content: space-around

	&::after
		@include clear		

// Small devices (landscape phones, 576px and up)
@media (max-width: $small-devices)
	.grid
		& &__aside
			flex-direction: column !important
// Medium devices (tablets, 768px and up)
@media (max-width: $medium-devices)
	pass
// Large devices (desktops, 992px and up)
@media (max-width: $large-devices)
	.grid
		& &__main
			width: 100%
			float: none

		& &__aside
			width: 100%
			float: none
			flex-direction: row
			&--tablet-column
				flex-direction: column
		&--reverse-order
			transform: scaleY(-1)
		& &__main--reverse-order
				transform: scaleY(-1)
		& &__aside--reverse-order
				transform: scaleY(-1)				
// Extra large devices (large desktops, 1200px and up)
@media (max-width: $x-large-devices)
	pass


