@import url(components.css);


/* components */
/* .ttl-section{
	font-size: 2.25em;
} */

.ttl-section {
	font-size: clamp(23.04px, 2.445vw, 36px);
	text-align: center;

	&:where([data-ruby]) {
		display: grid;
		gap: .125em;
	}

	&:where([data-ruby])::before {
		content: attr(data-ruby);
		font-size: .444em;
		background: url(../images/movie/icon_title_bg.svg) no-repeat left center / 1em 1em;
		max-width: fit-content;
		margin-inline: auto;
		padding-left: 1.5em;
	}
	
	&:where(.ttl-section--left){
		text-align: left;
		
		&:where([data-ruby])::before{
			margin-left: 0;
		}
	}
}


/* project */
.cards--movies{
	grid-template-columns: repeat(2, 1fr);
	--gap: 3.75em;
}
@media (max-width: 1023px){
	.cards--movies{
		grid-template-columns: repeat(1, 1fr);
	}
}

.movie{
	border: 1px solid #dfdfdf;
	border-radius: 1.875em;
	overflow: hidden;
}
.movie > iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
/* .movie__more{
	display: block;
	position: relative;
	z-index: 0;
	
	&::after{
		content: "▶";
		
		line-height: 1;
		font-size: 1.875em;
		color: white;
		background: #007401;
		border-radius: 100vmax;
		width: 2.5em;
		height: 2.5em;
		
		position: absolute;
		inset: 0;
		margin: auto;
		
		display: grid;
		place-items: center;
	}
}
.movie__thumb{
	aspect-ratio: 16 / 9;
	object-fit: cover;
} */
.movie__desc{
	padding: 1.875em;
}
.movie__desc > * + *{
	margin-top: 1rem;
}
.ttl--movie{
	font-size: 1.5em;
}
.note--movie{
	
}