// -------------------------------------------------------------------
// :: SECTION
// -------------------------------------------------------------------

.m-section{
	padding: 0 0 2rem;

	.m-section__content{
		padding: 0 2rem;

		aside{
			margin-bottom: 2rem;
		}
	}
}


@include FLOW-at($desktop){

	.m-section{
		@include clearfloat();
		padding: 0 0 2rem;

		.m-section__header,
		.m-section__content{
			width: calc(100% - 10rem);
			margin: 0 5rem;
		}

		.m-section__sidebar{
			width: 30%;
			float: left;
		}

		.m-section__sidebar + .m-section__content{
			width: calc(70% - 10rem);
			float: right;
		}
	}

	.m-section--sidebar-right{

		.m-section__sidebar{
			float: right;
		}

		.m-section__content{
			width: calc(70% - 10rem);
			float: left !important;
		}
	}

	.m-section--sidebar-up{
		.m-section__sidebar{
			margin-top: -10rem;
		}

		.m-content-block {
			border-top-right-radius: 0;
		}
	}

	.m-section__content{
		@include clearfloat();

		.m-heading{
			width: 100%;
			margin-top: 2rem;
		}

		aside{
			width: calc(30% - 5rem);
			margin: 0;
			float: left;
		}

		aside + article{
			width: 70%;
			float: right;
		}
	}

}