Article Grid Algorithm

a-article-grid.scss

// Article Grid
//
// The Article Grid is a CSS Grid algorithm specifically created for the single article layout. 
// It supports a side area called `social` that snaps to the second row on the left at desktop-xl
// in response to `author` becoming a full row. On small screens it is single column.
//
// The Article Grid algorithm is only responsible for position the _outer most_ elements of 
// the single article contents. 
//
// Markup: a-article-grid.html
//
// Style Guide: Algorithms.ArticleGrid

@import '~@setup';

.a-article-grid {

	@supports( display: grid ) {
		display: grid;
		grid-gap: $spacer-050;
		grid-template-columns: 100%;

		@include breakpoint( tablet ) {
			grid-template-columns: repeat( 2, 1fr );
			grid-template-rows: repeat( 3, auto );
			grid-gap: $spacer-1;
		}

	}

	@include breakpoint( desktop-xl ) {
		@supports( display: grid ) {
			grid-template-columns: repeat( 6, 1fr );
			grid-column-gap: $spacer-2;
		}
	}

}

.a-article-grid__main,
.a-article-grid__header {
	@include breakpoint( tablet ) {
		@supports( display: grid ) {
			grid-column: 1 / -1;
		}
	}
}

.a-article-grid__main {
	width: 100%;

	@include breakpoint( desktop-max ) {
		display: initial; // This resets an issue with pmc-a-grid and resizing images that have inline widths larger than the viewport. 
	}

	@include breakpoint( desktop-xl ) {
		@supports( display: grid ) {
			width: initial;
			grid-column: 2 / -1;
		}
	}
}

.a-article-grid__author {
	
	@include breakpoint( desktop-xl ) {
		@supports( display: grid ) {
			grid-column: 1 / -1;
		}
	}
}

.a-article-grid__author,
.a-article-grid__social {
	
	@include breakpoint( mobile-max ) {
		display: flex;
		justify-content: center;
	}

	@include breakpoint( tablet ) {
		float: left;
		width: calc( 50% - #{$spacer-1} );

		@supports( display: grid ) {
			width: initial;
		}
	}
}

.a-article-grid__social {
	@include clearfix;
}