.section-editors-pick-article {
	padding: 0;

	>.page {
		max-width: none;
	}
	
	.side-content {

		@media @bp_1024 {
			position: fixed;
			top: 0;
			right: 50%;
			bottom: 0;
			left: 0;
		}

		.wrapper {
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 300px;
			margin-right: -@page_spacer_mobile;

			@media @bp_480 {
				margin-right: -@page_spacer_mobile_landscape;
			}

			@media @bp_768 {
				height: 500px;
				margin-right: -@page_spacer_tablet;
			}

			@media @bp_1024 {
				background-position: left 70px center;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				//max-width: 720px;
				height: auto;
				margin-right: 0;
			}
		}

		header {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 35px;
			background-color: @red;

			@media @bp_768 {
				width: 70px;
			}

			@media @bp_1200 {
				width: 90px;
			}
		}

		h2 {
			color: @white;
			.transform-origin(top, left);
			.rotate(-90deg);
			.font-size(22);
			font-weight: 500;
			white-space: nowrap;
			position: absolute;
			bottom: 20px;
			left: 7px;

			@media @bp_768 {
				.font-size(42);
				left: 25px;
				bottom: 50px;
			}

			@media @bp_1200 {
				left: 35px;
			}
		}
	}

	.content {
		.font-size(14);
		line-height: 22px;
		padding-left: 35px;

		@media @bp_768 {
			.font-size(16);
			line-height: 24px;
			padding-left: 70px;
		}

		@media @bp_1024 {
			padding-left: 50%;
		}

		.wrapper {

			@media @bp_1024 {
				padding-left: 16.66%;
			}

			@media @bp_1400 {
				padding-left: 90px;
			}
		}

		a {
			.text-decoration-ink;
			color: @black;
		}

		strong {
			font-weight: 500;
		}
	}

	blockquote {
		.font-size(24);
		line-height: 30px;
		font-weight: 500;
		padding: 50px 0;
		margin: 0;

		@media @bp_768 {
			.font-size(42);
			line-height: 50px;
			padding: 70px 0;
		}
	}

	figure + blockquote {
		margin-top: 0;
	}

	blockquote + figure {
		margin-top: 30px;
	}

	figure {
		margin: 50px 0;
		border-top: 2px solid @black;
		border-bottom: 2px solid @black;
		padding: 28px 0;

		@media @bp_768 {
			.clearfix;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			margin: 90px 0;
			padding: 28px 0;
		}

		img,
		.media-container {

			@media @bp_768 {
				.box-sizing();
				float: right;
				width: 75%;
				order: 2;
			}
		}

		figcaption {
			.font-size(10);
			line-height: 14px;
			font-weight: 500;
			padding-top: 10px;

			@media @bp_768 {
				.box-sizing();
				float: left;
				width: 25%;
				padding-right: 30px;
				padding-top: 0;
				order: 1;
			}
		}
	}

	.article-info {
		.opacity(1);
		.font-size(12);
		text-transform: uppercase;
		padding-top: 30px;

		@media @bp_1024 {
			padding-top: 90px;
		}

		time {
			display: block;
			font-weight: normal;
			color: @grey-1;
			padding-right: 40px;
		}

		.tags {
			display: block;

			@media @bp_768 {
				.font-size(14);
			}

			@media @bp_1024 {
				display: inline-block;
			}
		}

		.text-tag  {
			font-weight: 500;
			margin-right: 20px;

			&:last-child {
				margin-right: 0;
			}
		}

		a.text-tag {
			text-decoration: none;
    		border-bottom: 2px solid black;
		}
	}

	.heading {

		@media @bp_1024 {
			//height: calc(~'100vh - 90px');
			min-height: calc(~'100vh - 90px');
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
	}

	h1 {
		.font-size(40);
		line-height: 46px;
		font-weight: 500;
		padding-bottom: 40px;
		padding-top: 30px;

		@media @bp_768 {
			.font-size(60);
			line-height: 66px;
			padding-bottom: 60px;
			padding-top: 20px;
		}

		@media @bp_1200 {
			.font-size(80);
			line-height: 86px;
			padding-bottom: 60px;
		}
	}

	h2 {
		.font-size(22);
		line-height: 32px;
		font-weight: bold;
		padding: 0;
		margin: 0;
	}

	h3 {
		.font-size(18);
		line-height: 24px;
		font-weight: bold;
		padding: 0;
		margin: 0;
	}

	h2 + p,
	h3 + p {
		padding-top: 10px;
	}

	p + h2 {
		padding-top: 30px;
	}

	p + h3 {
		padding-top: 20px;
	}

	.lead {
		.font-size(16);
		font-weight: 500;
		line-height: 20px;
		padding-bottom: 20px;

		@media @bp_768 {
			.font-size(24);
			line-height: 30px;
			padding-bottom: 40px;
		}
	}

	.author {
		background-color: #f6f6f6;
		padding: 40px @page_spacer_mobile;
		margin: 30px -20px 0 -20px;

		@media @bp_768 {
			margin: 60px -40px 0 -50px;
			padding-left: @page_spacer_tablet + 10px;
			padding-right: @page_spacer_tablet;
			padding-top: 60px;
			padding-bottom: 60px;
		}

		@media @bp_1024 {
			margin: 90px -90px 0 -105px;
			padding-left: @page_spacer_desktop + 10px;;
			padding-right: @page_spacer_desktop;
			padding-top: 80px;
			padding-bottom: 80px;
		}

		h4 {
			.font-size(24);
			line-height: 30px;
			font-weight: 500;
			padding-bottom: 30px;
		}

		h5 {
			.font-size(14);
			line-height: 20px;
			font-weight: 500;
		}

		.author-details {
			.font-size(12);
			line-height: 18px;
			display: flex;
			flex-direction: row;
			align-items: flex-start;

			@media @bp_768 {
				align-items: flex-end;
			}
		}

		article {
			padding-left: 30px;
		}

		p {
			padding-bottom: 0;
			margin-bottom: 0;
		}

		img {
			width: 80px;
			height: 80px;

			@media @bp_768 {
				width: 105px;
				height: 105px;
			}
		}
	}
}
