#lesson {
	background : linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-page-main) 100%);
}

	#lesson .lesson-layout {
		display               : grid;
		grid-template-columns : minmax(420px, 1fr) minmax(360px, 0.95fr);
		column-gap            : 72px;
		align-items           : start;
	}

	#lesson .lesson-copy {
		display     : grid;
		row-gap     : 34px;
		align-self  : start;
	}

	#lesson .lesson-copy h1 {
		max-width : 560px;
	}

	#lesson .lesson-body {
		display  : grid;
		row-gap  : 16px;
		align-self  : start;
		max-width   : 620px;
		margin      : 0 auto;
		text-align  : left;
	}

	#lesson .lesson-body h5 {
		margin : 0;
	}

	#lesson .lesson-figure {
		display        : grid;
		align-content  : start;
		row-gap        : 22px;
		width          : 100%;
		max-width      : 520px;
		justify-self   : start;
		align-self     : start;
	}

	#lesson .lesson-figure h4 {
		margin     : 0;
		padding-top: 8px;
	}

	#lesson .lesson-notes {
		display : block;
		width       : 100%;
		max-width   : none;
		margin-bottom : 0;
		text-align    : left;
	}

	#lesson .lesson-notes small {
		display      : block;
		max-width    : none;
		font-size    : 23px;
		line-height  : 1.08;
		letter-spacing : -0.015em;
		color        : rgba(75, 46, 32, 0.86);
		text-wrap    : balance;
	}

	#lesson .lesson-notes .lesson-flow {
		margin-top     : 16px;
		font-family    : var(--font-ui);
		font-size      : 15px;
		line-height    : 1.3;
		letter-spacing : 0.1em;
		text-transform : uppercase;
		color          : rgba(96, 58, 40, 0.68);
	}

	#lesson .lesson-flow-arrow {
		display         : inline-flex;
		width           : 24px;
		height          : 24px;
		margin          : 0 8px;
		border-radius   : 50%;
		align-items     : center;
		justify-content : center;
		background      : var(--color-brown-main);
		color           : #ffffff;
		font-size       : 14px;
		line-height     : 1;
		letter-spacing  : 0;
		vertical-align  : middle;
	}

	#lesson .lesson-media {
		width               : 100%;
		max-width           : none;
		min-height          : 480px;
		background-image    : url("../img/skin.png");
		background-repeat   : no-repeat;
		background-position : center left;
		background-size     : contain;
	}

@media (max-width : 980px) {
	#lesson {
		padding : 42px 0 48px;
	}

	#lesson .lesson-layout {
		grid-template-columns : 1fr;
		row-gap               : 24px;
	}

	#lesson .lesson-copy {
		row-gap : 24px;
	}

	#lesson .lesson-copy h1 {
		max-width : 100%;
	}

	#lesson .lesson-media {
		max-width           : 100%;
		min-height          : 360px;
		background-position : center;
	}

	#lesson .lesson-body,
	#lesson .lesson-figure,
	#lesson .lesson-notes {
		max-width     : 100%;
		margin-bottom : 0;
	}

	#lesson .lesson-notes small {
		font-size   : 22px;
		line-height : 1.12;
	}

	#lesson .lesson-notes .lesson-flow {
		font-size : 14px;
	}

	#lesson .lesson-flow-arrow {
		width      : 22px;
		height     : 22px;
		margin     : 0 6px;
		font-size  : 13px;
	}
}

@media (max-width : 640px) {
	#lesson {
		padding : 32px 0 36px;
	}

	#lesson .lesson-layout {
		row-gap : 20px;
	}

	#lesson .lesson-copy {
		row-gap : 20px;
	}

	#lesson .lesson-body {
		row-gap      : 14px;
		margin-bottom: 18px;
	}

	#lesson .lesson-notes small {
		font-size   : 18px;
		line-height : 1.16;
	}

	#lesson .lesson-notes .lesson-flow {
		margin-top     : 12px;
		font-size      : 12px;
		letter-spacing : 0.08em;
	}

	#lesson .lesson-flow-arrow {
		width      : 20px;
		height     : 20px;
		margin     : 0 5px;
		font-size  : 12px;
	}

	#lesson .lesson-media {
		min-height : 280px;
	}
}