@charset "utf-8";

.subVisual{
	.inr{ display: grid; padding: calc( var(--header-height) + 40rem ) 0 44rem; }
	.title{ margin-bottom: 0.33333333em; min-height: 1lh; text-transform: uppercase; font: 800 var(--fs45) var(--font-pre); letter-spacing: -.01em; }
	.subTitle{ letter-spacing: -.01em; color: #555; }
	.breadcrumb{ justify-self: end; margin-bottom: 10rem; display: flex; align-items: center; gap: 20rem; min-height: 1lh; text-transform: uppercase; font-size: 15rem; color: #777; }
	.home{ width: 12rem; height: 12rem; fill: currentColor; }
	.arrow{ width: 6rem; height: 10rem; fill: currentColor; }
	.img{ height: 340rem; background: #051507 no-repeat 50% / cover; }
	@media(min-width:768px){
		&.projects .img{ background-image: url('/images/content/subVisual-1-pc.webp'); }
		&.design .img{ background-image: url('/images/content/subVisual-2-pc.webp'); }
		&.video .img{ background-image: url('/images/content/subVisual-3-pc.webp'); }
	}
	@media(min-width:1280px){
		.inr{ padding-top: calc( var(--header-height) + 100rem ); }
		.title{ grid-column: 1/3; }
		.breadcrumb{ order: 3; margin-bottom: 0; }
	}
	@media(max-width:767px){
		&.projects .img{ background-image: url('/images/content/subVisual-1-mob.webp'); }
		&.design .img{ background-image: url('/images/content/subVisual-2-mob.webp'); }
		&.video .img{ background-image: url('/images/content/subVisual-3-mob.webp'); }
	}
}

/* common content */
main#content{ min-height:300px; padding: 80rem 0; }