/*
*************************************************

PROJECT NAME
Layout

Created by the epic SuperFriendly team.
http://superfriend.ly/

*************************************************
*/

.dm {

	&-l {

		/*-------------------------------------------    
		    Widths
		-------------------------------------------*/

		&-width--100 {
			@include dm-l-width--100;
		}

		&-width--75 {
			@include dm-l-width--75;
		}

		&-width--66 {
			@include dm-l-width--66;
		}

		&-width--50 {
			@include dm-l-width--50;
		}

		&-width--33 {
			@include dm-l-width--33;
		}

		&-width--25 {
			@include dm-l-width--25;
		}

		&-width--20 {
			@include dm-l-width--20;
		}

		&-maxWidth--1000 {
			@include dm-l-maxWidth--1000;
		}




		/*-------------------------------------------    
		    Columns
		-------------------------------------------*/

		&-col--100 {
			@include dm-l-col--100;
		}

		&-col--75 {
			@include dm-l-col--75;
		}

		&-col--66 {
			@include dm-l-col--66;
		}

		&-col--50 {
			@include dm-l-col--50;
		}

		&-col--33 {
			@include dm-l-col--33;
		}

		&-col--25 {
			@include dm-l-col--25;
		}

		&-col--20 {
			@include dm-l-col--20;
		}



		/*-------------------------------------------    
		    Article Grid
		-------------------------------------------*/

		&-articleGrid {

			@media screen and (min-width: 1248px) {
				display: grid;
				max-width: 1248px;
				max-width: 1404px;
				max-width: 1482px;
				margin: 0 auto;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				align-self: start;
				grid-template-rows: auto;
				grid-template-areas: 
						". dm-c-pageHeader dm-c-pageHeader dm-c-pageHeader dm-c-pageHeader dm-c-pageHeader dm-c-pageHeader ."
						". . dm-c-articleWell dm-c-articleWell dm-c-articleWell dm-c-articleWell . ."
						"dm-c-carbonWrap dm-c-carbonWrap dm-c-carbonWrap dm-c-carbonWrap dm-c-carbonWrap dm-c-carbonWrap dm-c-carbonWrap dm-c-carbonWrap"
						
			}

			&--main {

				@media screen and (min-width: 840px) {
					// seasoning
					padding-left: 10%;
					padding-right: 10%;
				}

				@media screen and (min-width: 1248px) {
					grid-column: 2 / span 6;
					@include dm-u-paddingLeft--0;
					@include dm-u-paddingRight--0;
				}

			}

			&--sidenote {

				//@include dm-u-move--offscreen;
				@include dm-u-pos--fixed;
				@include dm-u-padding--l;

				// seasoning				
				bottom: 0;
				left: 0;
				width: 100%;
				opacity: 0;
				z-index: 1;

				p {
					font-size: 13px !important;
					@include dm-u-fontStyle--BreveItalic;

					@media screen and (min-width: 1248px) {
						font-size: 14px !important;
					}

					@media screen and (max-width: 1248px) {
						color: #fff;
					}

				}

				a {
					@media screen and (max-width: 1248px) {
						color: #fff;
					}
				}
				

				@media screen and (min-width: 1248px) {

					@include dm-u-pos--static;
					@include dm-u-display--block;
					@include dm-u-padding--0;
					@include dm-u-float--right;

					// seasoning
					//width: 312px;
					//margin-right: -352px;
					opacity: 1;
					width: 40%;
					margin-right: -48%;
					transform: translateY(-12em);

					& + h1,
					& + h2,
					& + h3,
					& + h4,
					& + h5,
					& + h6,
					& + img,
					& + svg {
						@include dm-u-marginTop--m;
					}

				}


				@media screen and (max-width: 1248px) {
					background: rgba(62, 55, 48, 0.95);
				}

			}

		}


	}

}