/* Work Detail View */

#work-detail-content {
	display: flex;
	flex-direction: column;
    gap: 48px;
	width: 80vw;
	height: 100%;
	padding: 70px 10vw;
	overflow-y: scroll;
}

#work-detail-hero-container img,
#work-detail-hero-container video {
	width: 80vw;
	height: calc(9 * 80vw / 16);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, .25);
}

#work-detail-media-container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

#work-detail-media-container img,
#work-detail-media-container video {
	width: calc((80vw - 40px) / 2);
	height: calc(9 * ((80vw - 40px) / 2) / 16);
	object-fit: cover;
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, .25);
}

#work-detail-myrole {
	display: flex;
	flex-direction: column;
}
#work-detail-myrole-body {
	line-height: 26px;
}
@media (max-width: 768px) { #work-detail-myrole-body { line-height: 26px; } }
@media (min-width: 768px) { #work-detail-myrole-body { line-height: 38px; } }
@media (min-width: 1024px) { #work-detail-myrole-body { line-height: 46px; } }
@media (max-height: 500px) { #work-detail-myrole-body { line-height: 26px; } }

#work-detail-description {
    height: 76px;
    overflow: hidden;
    transition: height .25s ease;
}
#work-detail-description-title {
	cursor: pointer;
}
#work-detail-description-body {
	text-align: left;
	width: 60%;
}
@media (orientation: portrait) {
	#work-detail-content {
		width: 90vw;
		padding: 90px 5vw 70px 5vw;
        gap: 24px;
	}

	#work-detail-hero-container img,
	#work-detail-hero-container video {
		width: 90vw;
		height: calc(9 * 90vw / 16);
		box-shadow: 0 0 8px 4px rgba(0, 0, 0, .25);
	}

	#work-detail-description-body {
		width: 100%;
	}
	
	#work-detail-media-container img, #work-detail-media-container video {
		width: 100%;
		height: auto;
		object-fit: contain;
		box-shadow: 0 0 8px 4px rgba(0, 0, 0, .25);
	}
}