Typography/Layout Placeholders

_article.scss

// base _article.scss
// ------------------
.article-hed {
  @extend %layout-article-hed;
  @extend %type-article-hed;
}

.article-dek {
  @extend %layout-article-dek;
  @extend %type-article-dek;
}

_cosmopolitan-layout-placeholder.scss

// cosmopolitan _layout-placeholders.scss
// ------------------
%layout-article-hed {
  @extend %layout-article-hed-base;
  margin-bottom: $margin-l;
}

_layout-placeholders.scss

// base _layout-placeholder.scss
// ------------------
%layout-article-hed-base {
  @include grid-col-width( 18 );
  margin-bottom: $margin-s;
}

%layout-article-hed {
  @extend %layout-article-hed-base;
}

%layout-article-dek-base {
  @include grid-col-width( 6, $last-in-row: true );
}

%layout-article-dek {
  @extend %layout-article-dek-base;
}

_typography-placeholders.scss

// base _typography.scss
// ------------------
%type-article-hed {
  $alt-size-map: (
		mobile_w: 40,
		tablet: 52
	);
	@include type-style( $font-sans, 35, $alt-size-map );
	color: $headline-color;
	font-weight: normal;
}

%type-article-dek {
  $alt-size-map: (
		mobile_w: 40,
		tablet: 52
	);
	@include type-style( $font-serif, 21, $alt-size-map );
	color: palette( grey, medium );
	font-weight: normal;
}