.how-to-play {
	padding: 83px 38px 97px;
	background: $color_purple_2;
	.header {
		margin-bottom: 35px;
		position: relative;
		z-index: 20;
		h2 {
			font-family: $font_secondary;
			font-size: 69px;
			line-height: 69px;
			font-style: italic;
			font-weight: normal;
			text-align: center;
		}
	}
	.content {
		width: 299px;
		margin: 0 auto;
	}
	.item {
		margin-bottom: 34px;
		position: relative;
		&:last-child {
			margin-bottom: 0;
		}
		&::before {
			content: '';
			width: 280px;
			height: calc(100% + 300px);
			display: block;
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: url('../img/layout/bg-how-to-play-mobile.svg') no-repeat center center;
			background-size: auto 100%;
		}
		.arrows {
			position: relative;
			z-index: 30;
			display: flex;
			align-items: center;
			height: 67px;
			margin-bottom: 4px;
		}
		article {
			border: 1.25px solid $color_blue;
			background-color: $color_purple;
			position: relative;
			padding: 20px 24px;
			min-height: 395px;
			text-align: center;
			z-index: 20;
			.number {
				position: absolute;
				top: 0;
				left: 0;
				height: 57.97px;
				width: 53.74px;
				border: 1.25px solid $color_blue;
				border-top: none;
				border-left: none;
				text-align: center;
				line-height: 57.97px;
				font-size: 30px;
				color: #651fff;
				font-family: $font_score;
			}
			.thumb {
				width: 197px;
				margin: 0 auto 18px;
			}
			h3 {
				font-family: $font_secondary;
				color: $color_pink;
				font-style: italic;
				font-weight: normal;
				font-size: 30px;
				line-height: 33px;
				margin-bottom: 10px;
			}
			p {
				font-size: 15px;
				line-height: 27px;
				.pink {
					font-weight: bold;
				}
			}
		}
	}
	.item3 {
		article {
			padding: 40px 30px 20px;
		}
	}
	.item4 {
		article {
			padding: 20px 17.5px;
			.thumb {
				width: 207px;
			}
		}
	}
	@include media-breakpoint-up(md) {
		padding: 117.25px 40px 112.43px;
		.header {
			margin-bottom: 40px;
			h2 {
				font-size: 75px;
				line-height: 78px;
			}
		}
		.content {
			width: 672px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.item {
			width: calc(50% - 13px);
			margin-bottom: 22px;
			&::before {
				width: 305.03px;
				height: calc(100% + 236px);
				background: url('../img/layout/bg-how-to-play.svg') no-repeat center center;
				background-size: 100% auto;
				top: auto;
				bottom: -174px;
				transform: translateX(-50%);
			}
			.arrows {
				height: 69px;
				margin-bottom: 9px;
			}
			article {
				min-height: 463.49px;
				.thumb {
					width: 213px;
					margin-bottom: 20px;
				}
			}
		}
		.item4 {
			article {
				.thumb {
					width: 237.77px;
				}
			}
		}
	}
	@include media-breakpoint-up(xl) {
		padding: 211px 40px 230px;
		.header {
			margin-bottom: 82px;
			h2 {
				font-size: 100px;
				line-height: 103px;
			}
		}
		.content {
			width: 100%;
			max-width: 1502px;
		}
		.item {
			width: calc(25% - 22px);
			margin-bottom: 0;
			&::before {
				width: 334px;
				height: 815px;
			}
			.arrows {
				margin-bottom: 17px;
			}
			article {
				min-height: 470px;
				.thumb {
					width: 234px;
					margin-bottom: 22px;
					img {
						width: 100%;
					}
				}
			}
		}
		.item2 {
			article {
				.thumb {
					width: 233px;
				}
			}
		}
		.item3 {
			article {
				.thumb {
					width: 227px;
				}
			}
		}
		.item4 {
			article {
				.thumb {
					width: 236px;
				}
			}
		}
	}
}
