@charset "UTF-8";

/* --------------------------------------------
COLUMNS
--------------------------------------------- */
#columnLatests{
	header{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : space-between;
	}
	h2{
		display : grid;
		grid-auto-flow : column;
		column-gap : .25em;
		align-items : center;
		justify-content : start;
	}
	h2::before{
		display : block;
		width : auto;
		height : .5em;
		aspect-ratio : 1;
		content : "";
		background-color : var( --blue02 );
		border-radius : 50%;
	}
	h3{
		font-weight : 600;
		line-height : 1.4;
		letter-spacing : .05em;
	}
	li , li a{
		row-gap : 0;
	}
	li a{
		display : grid;
		align-items : start;
		background-color : var( --bgColor );
		outline : solid 1px var( --borderColor );
		outline-offset : -1px;
		&:not( :has( .is-new ) ){
			grid-template-columns : auto 1fr auto;
			.category{
				grid-column : 1;
			}
		}
		&:has( .is-new ){
			grid-template-columns : auto auto 1fr auto;
			.category{
				grid-column : 2;
			}
		}
	}
	.is-new{
		grid-row : 1;
		grid-column : 1;
	}
	.category{
		display : grid;
		place-content : center;
		font-weight : 700;
		line-height : 1.5;
		color : var( --categoryColor );
		text-indent : -.1em;
		letter-spacing : .1em;
		background-color : color-mix( in sRGB , var( --categoryColor ) 10% , white );
	}
	time{
		grid-row : 1;
		grid-column-end : -1;
		align-self : center;
	}
	h3{
		grid-row : 2;
		grid-column : 1/-1;
	}
	.excerpt{
		display : -webkit-box;
		grid-row : 3;
		grid-column : 1/-1;
		overflow : hidden;
		text-overflow : ellipsis;
		letter-spacing : .05em;
		-webkit-box-orient : vertical;
		-webkit-line-clamp : 1;
	}
	@media screen and ( width <= 768px ){
		ul{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		li a{
			padding-inline : calc( 20 * 100% / 416 );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 32 * var( --remBase ) );
			border-radius : calc( 16 * var( --remBase ) );
		}
		.category{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 18 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		time{
			font-size : calc( 18 * var( --remBase ) );
		}
		h3{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		.excerpt{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 550 * 100% / 1120 ) );
			row-gap : calc( 20 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 24 * var( --remBase ) );
		}
		li , li > a{
			display : grid;
			grid-template-rows : subgrid;
			grid-row : span 3;
		}
		li a{
			padding-inline : calc( 24 * 100% / 550 );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 40 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		.category{
			padding-block : calc( 4 * var( --remBase ) );
			padding-inline : calc( 12 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			border-radius : calc( 8 * var( --remBase ) );
		}
		time{
			font-size : calc( 16 * var( --remBase ) );
		}
		h3{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		.excerpt{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
}
#columnTheme{
	> header{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : space-between;
		p{
			letter-spacing : .05em;
		}
	}
	li , li a{
		display : grid;
		grid-template-rows : subgrid;
		grid-template-columns : 1fr;
		grid-row : span 3;
		row-gap : 0;
		width : 100%;
		height : 100%;
	}
	a{
		background-color : color-mix( in sRGB , var( --categoryColor ) 5% , white );
		outline : solid 1px var( --categoryColor );
		outline-offset : -1px;
	}
	li header{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		p{
			font-weight : 500;
			color : var( --categoryColor );
			letter-spacing : .045em;
		}
	}
	h3{
		display : grid;
		place-content : center;
		font-weight : 700;
		color : color-mix( in sRGB , var( --categoryColor ) 40% , black );
		text-indent : -.1em;
		letter-spacing : .1em;
		background-color : var( --categoryColor );
		border-radius : 100vmax;
	}
	.title{
		font-weight : 600;
		line-height : 1.4;
		color : color-mix( in sRGB , var( --categoryColor ) 40% , black );
	}
	.description{
		font-weight : 500;
		line-height : 1.4;
		color : var( --categoryColor );
		letter-spacing : .05em;
	}
	@supports (color: color-mix(in lch, red, blue)){
		.description{
			color : color-mix( in sRGB , var( --categoryColor ) 50% , black );
		}
	}
	@media screen and ( width <= 768px ){
		> header{
			p{
				font-size : calc( 18 * var( --remBase ) );
				font-weight : 500;
			}
		}
		ul{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		a{
			padding-inline : calc( 20 * 100% / 416 );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 32 * var( --remBase ) );
			border-radius : calc( 16 * var( --remBase ) );
		}
		h3{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 18 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		li header{
			column-gap : calc( 20 * 100% / 416 );
		}
		li header p{
			font-size : calc( 18 * var( --remBase ) );
		}
		.title{
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
		}
		.description{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> header{
			p{
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 550 * 100% / 1120 ) );
			row-gap : calc( 20 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 28 * var( --remBase ) );
		}
		a{
			padding-inline : calc( 24 * 100% / 550 );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 32 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		h3{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		li header{
			column-gap : calc( 20 * 100% / 502 );
		}
		li header p{
			font-size : calc( 16 * var( --remBase ) );
		}
		.title{
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		.description{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
}
#columnReports{
	header{
		display : grid;
		grid-template-columns : auto auto 1fr;
		align-items : center;
		> div{
			grid-row : 2;
			grid-column : 1/-1;
		}
	}
	.category{
		display : grid;
		grid-row : 1;
		grid-column : 1;
		place-content : center;
		font-weight : 700;
		color : var( --categoryColor );
		text-indent : -.1em;
		letter-spacing : .1em;
		background-color : color-mix( in sRGB , var( --categoryColor ) 10% , white );
		border-radius : 100vmax;
	}
	.note{
		color : #666;
		letter-spacing : .05em;
	}
	.lede{
		line-height : 1.4;
		letter-spacing : .05em;
	}
	dl > div{
		display : grid;
		grid-template-columns : 1fr auto;
		background-color : var( --bgColor );
		box-shadow : 1px 1px 0 var( --borderColor );
	}
	dt{
		grid-row : 1;
		grid-column : 1/-1;
		font-weight : 500;
		color : #666;
	}
	dd{
		&:nth-of-type( 1 ){
			display : grid;
			grid-row : 2;
			grid-column : 2;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : end;
			> span{
				&:nth-of-type( 1 ){
					font-family : Roboto , sans-serif;
					font-weight : 900;
				}
				&:nth-of-type( 2 ){
					font-weight : 500;
				}
			}
		}
		&:nth-of-type( 2 ){
			grid-row : 3;
			grid-column : 2;
			text-align : center;
			text-indent : -.05em;
			letter-spacing : .05em;
		}
	}
	li{
		counter-increment : no;
	}
	li a{
		display : grid;
		grid-template-columns : auto 1fr auto;
		background-color : var( --bgColor );
		outline : solid 1px var( --borderColor );
		outline-offset : -1px;
		&::before{
			display : grid;
			place-content : center;
			width : auto;
			aspect-ratio : 1;
			font-family : Roboto , sans-serif;
			font-weight : 700;
			content : counter( no , decimal-leading-zero );
		}
	}
	li:nth-child( 1 ){
		a::before{
			color : #316a6e;
			background-color : #e1f5ee;
		}
	}
	li:nth-child( 2 ){
		a::before{
			color : #732d16;
			background-color : #faece7;
		}
	}
	li:nth-child( 3 ){
		a::before{
			color : #3c4688;
			background-color : #eeedfe;
		}
	}
	h3{
		line-height : 1.4;
		letter-spacing : .1em;
	}
	li a{
		> div{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : start;
			p{
				font-weight : 500;
				line-height : 1.4;
				letter-spacing : .05em;
				+ p::before{
					white-space : pre;
					content : " / ";
				}
			}
		}
		span{
			font-weight : 500;
			color : var( --blue02 );
		}
	}
	@media screen and ( width <= 768px ){
		header{
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 416 );
		}
		.category{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 18 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		.archiveLink{
			width : fit-content;
			margin-top : calc( 12 * var( --remBase ) );
			margin-left : auto;
		}
		.lede{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
		dl{
			margin-top : calc( 24 * var( --remBase ) );
			> div{
				+ div{
					margin-top : calc( 20 * var( --remBase ) );
				}
				display : grid;
				grid-template-rows : auto 1fr;
				grid-template-columns : auto auto;
				align-items : end;
				justify-content : space-between;
				padding-block : calc( 24 * var( --remBase ) );
				padding-inline : calc( 20 * 100% / 416 );
				border-radius : calc( 16 * var( --remBase ) );
			}
		}
		dt{
			grid-row : 1;
			grid-column : 1;
			font-size : calc( 22 * var( --remBase ) );
		}
		dd{
			&:nth-of-type( 1 ){
				grid-row : 1/-1;
				grid-column : 2;
				align-self : end;
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 64 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 22 * var( --remBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				grid-row : 2;
				grid-column : 1;
				align-self : end;
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		ul{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li a{
			grid-template-rows : auto 1fr;
			grid-template-columns : auto 1fr;
			row-gap : calc( 4 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 376 );
			padding-inline : calc( 20 * 100% / 416 );
			padding-top : calc( 20 * var( --remBase ) );
			padding-bottom : calc( 16 * var( --remBase ) );
			border-radius : calc( 16 * var( --remBase ) );
			&::before{
				grid-row : 1;
				grid-column : 1;
				align-self : center;
				height : calc( 64 * var( --remBase ) );
				font-size : calc( 32 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
			}
		}
		h3{
			grid-row : 1;
			grid-column : 2;
			font-size : calc( 22 * var( --remBase ) );
		}
		li a{
			> div{
				grid-row : 2;
				grid-column : 1/-1;
				justify-content : end;
				p{
					font-size : calc( 18 * var( --remBase ) );
					text-align : left;
				}
			}
			span{
				grid-row : 3;
				grid-column : 1/-1;
				justify-self : end;
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 1120 );
			> div{
				display : grid;
				grid-auto-flow : column;
				align-items : baseline;
				justify-content : space-between;
			}
		}
		.category{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		.note{
			font-size : calc( 16 * var( --remBase ) );
		}
		.lede{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		dl{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 360 * 100% / 1120 ) );
			justify-content : space-between;
			margin-top : calc( 40 * var( --remBase ) );
			> div{
				padding-inline : calc( 20 * 100% / 265 );
				padding-top : calc( 20 * var( --remBase ) );
				padding-bottom : calc( 24 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
			}
		}
		dt{
			font-size : calc( 20 * var( --remBase ) );
		}
		dd{
			&:nth-of-type( 1 ){
				margin-top : calc( 12 * var( --remBase ) );
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 64 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 20 * var( --remBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 4 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		ul{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li a{
			grid-template-rows : auto 1fr;
			row-gap : calc( 8 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 1080 );
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 20 * 100% / 1120 );
			border-radius : calc( 16 * var( --remBase ) );
			&::before{
				grid-row : 1/-1;
				grid-column : 1;
				align-self : start;
				height : calc( 64 * var( --remBase ) );
				font-size : calc( 32 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
			}
		}
		h3{
			grid-row : 1;
			grid-column : 2;
			font-size : calc( 20 * var( --remBase ) );
		}
		li a{
			> div{
				grid-row : 2;
				grid-column : 2;
				p{
					font-size : calc( 16 * var( --remBase ) );
				}
			}
			span{
				grid-row : 1/-1;
				grid-column : 3;
				align-self : center;
				font-size : calc( 16 * var( --remBase ) );
			}
		}
	}
}
#columnPress{
	color : #5a85bc;
	background-color : #d6e4f6;
	h3 , p{
		line-height : 1.4;
	}
	h3{
		padding-right : 1em;
		font-weight : 700;
		letter-spacing : .1em;
	}
	p{
		font-weight : 500;
		letter-spacing : .05em;
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 20 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 416 );
		margin-top : calc( 24 * var( --remBase ) );
		border-radius : calc( 16 * var( --remBase ) );
		h3 , p{
			font-size : calc( 20 * var( --remBase ) );
		}
		p{
			margin-top : calc( 8 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 20 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 1120 );
		margin-top : calc( 24 * var( --remBase ) );
		font-size : 0;
		border-radius : calc( 16 * var( --remBase ) );
		h3 , p{
			display : inline;
			font-size : calc( 18 * var( --remBase ) );
		}
	}
}
#columnMedias{
	li + li{
		border-top : solid 1px var( --borderColor );
	}
	li a{
		display : grid;
		grid-template-columns : auto 1fr;
	}
	time{
		letter-spacing : .05em;
	}
	.category{
		display : grid;
		place-content : center;
		font-weight : 700;
		color : var( --categoryColor );
		text-indent : -.1em;
		letter-spacing : .1em;
		background-color : color-mix( in sRGB , var( --categoryColor ) 10% , white );
		border-radius : 100vmax;
	}
	h3{
		font-weight : 700;
		letter-spacing : .1em;
	}
	.excerpt{
		font-weight : 500;
		line-height : 1.4;
		letter-spacing : .05em;
	}
	@media screen and ( width <= 768px ){
		.archiveLink{
			width : fit-content;
			margin-top : calc( 12 * var( --remBase ) );
			margin-left : auto;
		}
		ul{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li a{
			grid-template-columns : auto auto 1fr;
			row-gap : calc( 8 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 392 );
			padding-block : calc( 20 * var( --remBase ) );
			padding-left : calc( 12 * 100% / 416 );
		}
		time{
			grid-row : 1;
			grid-column : 1;
			padding-top : calc( 9 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		.category{
			grid-row : 1;
			grid-column : 2;
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 18 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		h3{
			grid-row : 2;
			grid-column : 1/-1;
			font-size : calc( 22 * var( --remBase ) );
			line-height : 1.4;
		}
		.excerpt{
			grid-row : 3;
			grid-column : 1/-1;
			font-size : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : space-between;
		}
		ul{
			margin-top : calc( 20 * var( --remBase ) );
		}
		li a{
			row-gap : calc( 8 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 1120 );
			padding-block : calc( 20 * var( --remBase ) );
		}
		time{
			grid-row : 1;
			grid-column : 1;
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 28 / 14 );
		}
		.category{
			grid-row : 2;
			grid-column : 1;
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		h3{
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 28 / 20 );
		}
		.excerpt{
			padding-top : calc( 8 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
}
#columnRanking{
	header{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : space-between;
		p{
			font-weight : 500;
			letter-spacing : .05em;
		}
	}
	li{
		counter-increment : no;
	}
	li + li{
		border-top : solid 1px var( --borderColor );
	}
	a{
		display : grid;
		grid-template-columns : auto 1fr auto;
		align-items : start;
		&::before{
			grid-row : 1;
			grid-column : 1;
			font-family : Roboto , sans-serif;
			font-weight : 800;
			content : counter( no );
		}
	}
	h3{
		grid-row : 1;
		grid-column : 2;
		font-weight : 700;
		line-height : 1.4;
		letter-spacing : .1em;
	}
	p{
		grid-row : 1;
		grid-column : 3;
		font-weight : 500;
		color : #666;
		text-align : right;
		letter-spacing : .05em;
	}
	@media screen and ( width <= 768px ){
		header{
			p{
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		ol{
			margin-top : calc( 24 * var( --remBase ) );
		}
		a{
			grid-template-columns : auto 1fr;
			row-gap : calc( 4 * var( --remBase ) );
			column-gap : calc( 20 * 100% / 392 );
			justify-content : space-between;
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 12 * 100% / 416 );
			&::before{
				grid-row : 1;
				grid-column : 1;
				font-size : calc( 36 * var( --remBase ) );
			}
		}
		h3{
			grid-row : 1;
			grid-column : 2;
			font-size : calc( 22 * var( --remBase ) );
		}
		li p{
			grid-row : 2;
			grid-column : 1/-1;
			font-size : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			p{
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		ol{
			margin-top : calc( 40 * var( --remBase ) );
		}
		a{
			column-gap : calc( 20 * 100% / 1120 );
			padding-block : calc( 24 * var( --remBase ) );
			&::before{
				font-size : calc( 36 * var( --remBase ) );
			}
		}
		h3{
			margin-top : calc( 4 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		li p{
			margin-top : calc( 9 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
	}
}
#posts{
	.posts{
		> li{
			+ li{
				border-top : solid 1px var( --borderColor );
			}
		}
		a{
			display : block;
		}
		article{
			display : grid;
		}
		h2{
			font-weight : 600;
			line-height : 1.4;
			letter-spacing : .1em;
		}
		.excerpt{
			line-height : 1.4;
		}
		time{
			letter-spacing : .1em;
		}
		.category{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			letter-spacing : .05em;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 80 * var( --remBase ) );
		.posts{
			a{
				padding-block : calc( 40 * var( --remBase ) );
			}
			article{
				grid-template-columns : calc( 20 * var( --contentBase ) ) auto 1fr auto calc( 20 * var( --contentBase ) );
			}
			picture{
				grid-row : 1;
				grid-column : 1/-1;
				img{
					width : 100%;
					height : auto;
				}
			}
			h2 , .excerpt{
				grid-column : 2/5;
			}
			h2{
				grid-row : 2;
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
			}
			.excerpt{
				grid-row : 3;
				margin-top : calc( 20 * var( --remBase ) );
				margin-bottom : calc( 40 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
			}
			time{
				grid-row : 4;
				grid-column : 2;
				font-size : calc( 20 * var( --remBase ) );
			}
			.category{
				grid-row : 4;
				grid-column : 4;
				font-size : calc( 20 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 80 * var( --remBase ) );
		.posts{
			a{
				padding-inline : calc( 40 * var( --contentBase ) );
			}
			article{
				grid-template-rows : auto auto auto;
				grid-template-columns : auto auto 1fr auto;
				column-gap : calc( 40 * 100% / 1200 );
				padding-block : calc( 20 * var( --remBase ) );
			}
			picture{
				grid-row : 1/-1;
				grid-column : 1;
				width : auto;
				height : calc( 186 * var( --remBase ) );
				aspect-ratio : 1;
				img{
					width : 100%;
					height : 100%;
					object-fit : cover;
					&[src$=".svg"]{
						object-fit : contain;
					}
				}
			}
			h2{
				grid-row : 1;
				grid-column : 2/-1;
				font-size : calc( 24 * var( --remBase ) );
			}
			.excerpt{
				grid-row : 2;
				grid-column : 2/-1;
				font-size : calc( 20 * var( --remBase ) );
			}
			time{
				grid-row : 3;
				grid-column : 2;
				font-size : calc( 20 * var( --remBase ) );
			}
			.category{
				grid-row : 3;
				grid-column : 4;
				font-size : calc( 20 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
STAFF
--------------------------------------------- */
#staffContent{
	> p{
		font-weight : 500;
		text-align : center;
	}
	li{
		picture{
			overflow : hidden;
		}
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
			object-position : center top;
		}
	}
	h3{
		font-weight : 500;
		text-align : center;
	}
	ul{
		display : grid;
		justify-content : space-between;
	}
	li{
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : 0;
	}
	li p{
		font-weight : 500;
		color : var( --blue03 );
		background-color : #e2fcff;
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 78 * var( --remBase ) );
		margin-top : calc( 60 * var( --remBase ) );
		> picture{
			margin-top : calc( 28 * var( --remBase ) );
		}
		> p{
			margin-top : calc( 44 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 34 / 24 );
		}
		ul{
			grid-template-columns : repeat( 2 , calc( 220 * var( --contentBase ) ) );
			row-gap : calc( 18 * var( --remBase ) );
			margin-top : calc( 48 * var( --remBase ) );
		}
		li{
			row-gap : 0;
			picture{
				height : calc( 166 * var( --remBase ) );
				border-radius : calc( 12 * var( --remBase ) );
			}
		}
		h3{
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
		}
		li p{
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 12 * 100% / 220 );
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
			border-radius : calc( 12 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 1004 * var( --viewportBase ) );
		padding-bottom : calc( 112 * var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 72 * var( --remBase ) );
		> picture{
			margin-top : calc( 30 * var( --remBase ) );
		}
		> p{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
		}
		ul{
			grid-template-columns : repeat( 3 , calc( 302 * 100% / 1004 ) );
			row-gap : calc( 48 * var( --remBase ) );
			margin-top : calc( 42 * var( --remBase ) );
		}
		li{
			picture{
				height : calc( 230 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) );
			}
		}
		h3{
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
		li p{
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 12 * 100% / 302 );
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			border-radius : calc( 10 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-template-rows : 100%;
	grid-auto-flow : column;
	translate : -50% 0;
	a , span{
		display : grid;
		place-items : center;
	}
	:where( .prev , .next ){
		position : absolute;
	}
	a , span{
		width : auto;
		aspect-ratio : 1;
		font-weight : 500;
		outline : solid 1px var( --blue );
		outline-offset : -1px;
	}
	a:not(.prev, .next){
		color : var( --blue );
	}
	.current{
		font-weight : 600;
		color : white;
		background-color : var( --blue );
	}
	img{
		filter : var( --filterBlue );
	}
	@media screen and ( width <= 768px ){
		column-gap : calc( 20 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		a , span{
			height : calc( 40 * var( --remBase ) );
			border-radius : calc( 4 * var( --remBase ) );
		}
		a:not(.prev, .next), span{
			font-size : calc( 20 * var( --remBase ) );
		}
		img{
			height : calc( 16 * var( --remBase ) );
		}
		.prev{
			left : calc( -60 * var( --remBase ) );
		}
		.next{
			right : calc( -60 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		column-gap : calc( 20 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		a , span{
			height : calc( 40 * var( --remBase ) );
			border-radius : calc( 4 * var( --remBase ) );
		}
		a:not(.prev, .next), span{
			font-size : calc( 20 * var( --remBase ) );
		}
		img{
			height : calc( 16 * var( --remBase ) );
		}
		.prev{
			left : calc( -60 * var( --remBase ) );
		}
		.next{
			right : calc( -60 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#pagination{
		a:not(.prev, .next):hover{
			color : white;
			background-color : var( --blue );
		}
		.prev , .next{
			&:hover{
				background-color : var( --blue );
				img{
					filter : var( --filterWhite );
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination a{
		transition : background .3s linear , color .3s linear;
		img{
			transition : filter .3s linear;
		}
	}
}