.cases {
	position: relative;
	overflow: hidden;
	padding-top: 70px;
	background: linear-gradient(180deg, #000 72px, #9466f9 25%);
}

.cases-content {
	position: relative;
	z-index: 2;
	padding: 40px 30px;
}

.cases-content > .intro {
	margin-bottom: 30px;
}

.cases-content > .list {
	margin: -15px;
}

.cases-content > .list > .list-item {
	width: 100%;
	padding: 15px;
}

.cases-content > .list > .list-item:last-child {
	margin-right: auto;
}

.cases-item {
	position: relative;
	overflow: hidden;
	background: #000;
	border-radius: 20px;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}

.cases-item > .link {
	position: relative;
	z-index: 2;
	height: 320px;
	opacity: 0.9;
	position: relative;
	transition: opacity 0.25s;
}

.cases-item > .link > .img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale3d(1, 1, 1);
	backface-visibility: hidden;
	will-change: transform;
	transition: transform 0.25s;
}

.cases-item:hover > .link, .cases-item:active > .link {
	opacity: 1;
}

.cases-item:hover > .link > .img, .cases-item:active > .link > .img {
	transform: scale3d(1.1, 1.1, 1.1);
}

.cases-footer {
	position: relative;
	z-index: 2;
	padding: 0 30px 40px;
}

.cases-footer > .title {
	font-style: italic;
	padding-right: 40px;
	margin-bottom: 30px;
}

.cases-footer > .sprite {
	position: absolute;
}

.cases-footer > .sprite.no-1 {
	top: -20px;
	left: calc(100% - 80px);
}

.cases-footer > .sprite.no-2 {
	top: 25%;
	left: calc(100% - 60px);
}

.cases-footer > .wrapper {
	display: flex;
	gap: 20px;
}

.cases > .diamond {
	position: absolute;
	z-index: 1;
}

.cases > .diamond.no-1 {
	top: -300px;
	left: -150px;
}

.cases > .diamond.no-2 {
	z-index: 0;
	top: 100px;
	left: -200px;
}

.cases > .diamond.no-3 {
	right: -300px;
	bottom: 15%;
}

@media (min-width: 600px) {
	.cases-item > .link {
		height: 340px;
	}
}

@media (min-width: 800px) {
	.cases-content {
		padding: 50px 30px;
	}
	.cases-content > .intro {
		margin-bottom: 40px;
	}
	.cases-content > .list {
		margin: -20px;
		justify-content: flex-end;
	}
	.cases-content > .list > .list-item {
		width: 50%;
		padding: 20px;
	}
	.cases-content > .list > .list-item.is-bigger {
		width: 100%;
	}
	.cases-item {
		height: 100%;
	}
	.cases-item > .link {
		height: 360px;
	}
	.cases-footer {
		display: flex;
		align-items: center;
		padding: 0 45px 50px;
	}
	.cases-footer > .title {
		flex-shrink: 0;
		width: 50%;
		padding-right: 100px;
		margin-bottom: 0;
	}
	.cases-footer > .sprite.no-1 {
		top: 0;
		left: calc(50% - 200px);
	}
	.cases-footer > .sprite.no-2 {
		top: 50%;
		left: calc(50% - 100px);
	}
}

@media (min-width: 1000px) {
	.cases-item > .link {
		height: 390px;
	}
}

@media (min-width: 1200px) {
	.cases-content {
		padding: 60px 30px;
	}
	.cases-content > .intro {
		position: absolute;
		top: 70px;
		left: 30px;
		margin-bottom: 0;
		width: 33.33333%;
		padding: 0 60px;
	}
	.cases-content > .list {
		margin: -25px;
	}
	.cases-content > .list > .list-item {
		width: 33.33333%;
		padding: 25px;
	}
	.cases-content > .list > .list-item.is-bigger {
		width: 66.66666%;
	}
	.cases-item > .link {
		height: 430px;
	}
	.cases-footer {
		padding: 0 60px 60px;
	}
	.cases-footer > .title {
		padding-right: 120px;
	}
}

@media (min-width: 1400px) {
	.cases-item > .link {
		height: 480px;
	}
}