@charset "utf-8";

.casestudy-header {
    padding: 88px 0;
    background: var(--blue-bg-light);
    margin: 0 0 40px;
}

.casestudy-header__name {
	font-size: var(--font-size-ms);
	font-weight: bold;
	color: var(--blue);
	position: relative;
	padding-left: 24px;
	margin: 20px 0;
}

.casestudy-header__name::before,
.casestudy-header__name::after {
	content: '';
	display: block;
	width: 9px;
	aspect-ratio: 1;
	position: absolute;
	top: 0.9em;
}

.casestudy-header__name::before {
	background: var(--red);
	left: 4px;
	translate: 0 -4px;
}

.casestudy-header__name::after {
	background: var(--blue);
	left: 0;
	translate: 0 -7px;
}

.casestudy-header__title {
    font-weight: bold;
    font-size: var(--font-size-2xl);
}

.casestudy-desc {
    margin: 0 0 64px;
}

.casestudy-video {
    background: var(--blue-bg-light);
    padding: 64px;
}

@media (width <= 768px){

	.casestudy-header {
		padding: 32px 0;
		margin: 0 0 min(40px, calc(32 / 375 * 100vw));
	}

	.casestudy-header__name {
		padding-left: 20px;
		margin: 0 0 2px;
	}

    .casestudy-header__title {
		margin: 0;
		font-size: var(--font-size-xl);
	}

	.casestudy-desc {
		margin: 0 0 24px;
	}

}