@charset "UTF-8";

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