@charset "UTF-8";

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works{
	header{
		position : sticky;
		padding-block : calc( 10 * var( --remBase ) );
		h1{
			font-weight : 500;
		}
	}
	#content{
		> p{
			padding-block : calc( 10 * var( --remBase ) );
		}
		figure{
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 100dvh - var( --headerHeight ) - ( 30 + 20 + 10 + 41 + 50 ) * var( --remBase ) - var( --worksTitle ) - var( --worksCredits ) - ( ( 72 - 20 ) / 2 * var( --remBase ) - ( var( --worksTitle ) ) / 2 ) );
		header{
			top : calc( var( --headerHeight ) + 30 * var( --remBase ) );
			h1{
				padding-inline : calc( 10 * var( --contentBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 35 / 24 );
			}
		}
		#content{
			margin-top : calc( 20 * var( --remBase ) );
			p{
				padding-inline : calc( 10 * var( --contentBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 30 / 16 );
			}
			> p + figure{
				margin-top : calc( 40 * var( --remBase ) );
			}
			figure + figure{
				margin-top : calc( 60 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 800px ) / 2 ) , calc( 214 * var( --viewportBase ) ) );
		padding-top : calc( 70 * var( --remBase ) );
		padding-bottom : calc( 100dvh - var( --headerHeight ) - ( 70 + 20 + 40 + 41 + 50 ) * var( --remBase ) - var( --worksTitle ) - var( --worksCredits ) - ( ( 161 - 20 ) / 2 * var( --remBase ) - ( var( --worksTitle ) ) / 2 ) );
		header{
			top : calc( var( --headerHeight ) + 70 * var( --remBase ) );
			h1{
				font-size : calc( 36 * var( --remBase ) );
				line-height : calc( 64 / 36 );
			}
		}
		#content{
			margin-top : calc( 16 * var( --remBase ) );
			p{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 2;
			}
			> p + figure{
				margin-top : calc( 60 * var( --remBase ) );
			}
			figure + figure{
				margin-top : calc( 84 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news{
	header{
		time{
			display : block;
			padding-block : calc( 10 * var( --remBase ) );
			font-family : Barlow , sans-serif;
		}
		h1{
			padding-block : calc( 10 * var( --remBase ) );
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		header{
			&::after{
				display : block;
				width : calc( 300 * 100% / 320 );
				height : 0;
				margin-inline : auto;
				margin-top : calc( 30 * var( --remBase ) );
				content : "";
				border-top : solid 1px var( --base );
			}
			time , h1{
				padding-inline : calc( 10 * var( --contentBase ) );
			}
			time{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 19 / 16 );
			}
			h1{
				margin-top : calc( 20 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 35 / 24 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : max( calc( ( 100% - 820px ) / 2 ) , calc( 204 * var( --viewportBase ) ) );
		padding-top : calc( 70 * var( --remBase ) );
		padding-bottom : calc( 137 * var( --remBase ) );
		header{
			padding-block : calc( 30 * var( --remBase ) );
			padding-inline : calc( 10 * 100% / 820 );
			border-bottom : solid 1px var( --base );
			time{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.2;
			}
			h1{
				margin-top : calc( 20 * var( --remBase ) );
				font-size : calc( 28 * var( --remBase ) );
				line-height : calc( 64 / 28 );
			}
			picture{
				padding-block : calc( 10 * var( --remBase ) );
				margin-top : calc( 30 * var( --remBase ) );
			}
		}
	}
}