@charset "UTF-8";

/* --------------------------------------------
WORKS
--------------------------------------------- */
article.works > ul{
	display : grid;
}
article.works > ul > li{
	width : 100%;
	height : auto;
}
article.works .btn-modal{
	position : relative;
	width : 100%;
	height : 100%;
}
article.works .btn-modal::before{
	position : absolute;
	z-index : 0;
	width : 100%;
	height : 100%;
	content : "";
	background-color : color-mix( in sRGB , black 25% , transparent );
	opacity : 0;
}
article.works .btn-modal span{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
	padding : .5em;
	font-weight : 700;
	line-height : 1.3;
	color : white;
	pointer-events : none;
	opacity : 0;
}
article.works .btn-modal > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width < 768px ){
	article.works{
		padding-bottom : calc( 80 * var( --remBase ) );
	}
	article.works > ul{
		grid-template-columns : repeat( 2 , calc( 180 * var( --percentBase ) ) );
		row-gap : calc( 16 * var( --remBase ) );
		column-gap : calc( 16 * var( --percentBase ) );
	}
	article.works > ul > li{
		aspect-ratio : 180 / 101;
	}
}
@media print , screen and ( width > 768px ){
	article.works{
		padding-inline : min( 4px , calc( 4 * var( --viewportBase ) ) );
		padding-bottom : calc( 160 * var( --remBase ) );
	}
	article.works > ul{
		grid-template-columns : repeat( auto-fit , minmax( 320px , 1fr ) );
		row-gap : calc( 4 * var( --remBase ) );
		column-gap : min( 4px , calc( 4 * var( --viewportBase ) ) );
	}
	article.works > ul > li{
		aspect-ratio : 320 / 180;
	}
	article.works .btn-modal span{
		font-size : var(--font-honmon);
	}
}
@media ( hover : hover ){
	.works .btn-modal:hover::before{
		opacity : 1;
	}
	.works .btn-modal:hover span{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.works .btn-modal::before{
		transition : opacity var( --transitionBase );
	}
	.works .btn-modal span{
		transition : opacity var( --transitionBase );
	}
}