.why-play-streaks {
	background: $color_purple_2;
	position: relative;
	.header {
		padding: 65px 0 54px;
		max-width: 200px;
		margin: 0 auto;
		h2 {
			font-family: $font_secondary;
			font-size: 69px;
			line-height: 69px;
			text-align: center;
			font-style: italic;
			font-weight: normal;
		}
	}
	.line {
		border-top: 1px solid $color_blue;
	}
	.topic {
		margin: 0 auto;
		width: 335px;
		border-left: 1px solid $color_blue;
		border-right: 1px solid $color_blue;
		padding: 35px 0 40px;
		.image {
			margin-bottom: 37px;
			img {
				height: 100%;
				width: auto;
			}
		}
		.text {
			max-width: 302px;
			margin: 0 auto;
			text-align: center;
			h3 {
				font-family: $font_secondary;
				font-style: normal;
				font-weight: normal;
				color: $color_pink;
				margin-bottom: 12px;
				font-size: 45px;
				line-height: 45px;
			}
			p {
				font-size: 16px;
				line-height: 27px;
			}
		}
	}
	.line-1,
	.line-3,
	.line-5 {
		.image {
			text-align: right;
			img {
				margin: 0 0 0 auto;
			}
		}
	}
	.line-1 {
		.image {
			height: 198px;
		}
	}
	.line-2 {
		.image {
			height: 196px;
		}
	}
	.line-3 {
		.image {
			height: 183px;
		}
	}
	.line-4 {
		.image {
			height: 194px;
		}
	}
	.line-5 {
		border-bottom: 1px solid $color_blue;
		.image {
			height: 208px;
		}
	}
	@include media-breakpoint-up(md) {
		padding: 310.5px 0 0 0;
		.text-carousel {
			width: 100%;
			height: 78px;
			overflow: hidden;
			position: absolute;
			top: 122.89px;
			left: 0;
			.animation-text {
				font-family: $font_secondary;
				font-size: 75px;
				line-height: 78px;
				white-space: nowrap;
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				left: -2046px;
				animation: moveRight4 5s linear infinite;
				.logo {
					width: 36px;
					margin: 0 50px;
				}
			}
		}
		.line {
			display: flex;
			border-right: 1px solid $color_blue;
		}
		.column {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 103.7px;
			height: 312.3px;
			.block {
				width: 100%;
				height: 0;
				padding-top: 100%;
				border: 1px solid $color_blue;
				border-bottom: none;
				border-right: none;
				position: relative;
				&.block1 {
					border-top: none;
				}
				img {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.win {
					margin-top: 2px;
				}
				.picks {
					margin-top: 6px;
				}
				.tenisball {
					margin-left: -19px;
				}
			}
		}
		.topic {
			width: calc(100% - 207.4px);
			height: 312.3px;
			display: flex;
			align-items: center;
			border-right: none;
			padding: 0 30px;
			.image {
				margin: 0;
				height: auto;
				img {
					width: 100%;
					height: auto;
				}
			}
			.text {
				width: auto;
				text-align: left;
				max-width: none;
				margin: 0;
				h3 {
					font-size: 50px;
					line-height: 50px;
				}
			}
		}
		.line-1,
		.line-3,
		.line-5 {
			.image {
				text-align: left;
				img {
					margin: 0 0 0 0;
				}
			}
		}
		.line-2,
		.line-4 {
			.topic {
				padding-left: 13.14px;
			}
		}
		.line-1 {
			.image {
				width: 243.65px;
				margin-right: 10.95px;
			}
			.text {
				width: calc(100% - 254.6px);
			}
		}
		.line-2 {
			.image {
				width: 243.14px;
				margin-right: 43.67px;
			}
			.text {
				width: calc(100% - 287.32px);
				max-width: 259.35px;
			}
		}
		.line-3 {
			.topic {
				width: calc(100% - 103.7px);
			}
			.image {
				width: 243.14px;
				margin-right: 28.14px;
			}
			.text {
				width: calc(100% - 251.28px);
				max-width: 391.63px;
			}
		}
		.line-4 {
			.image {
				width: 243.45px;
				margin-right: 46.17px;
			}
			.text {
				width: calc(100% - 289.62px);
				max-width: 320.51px;
			}
		}
		.line-5 {
			.image {
				width: 242.66px;
				margin-right: 26.29px;
			}
			.text {
				width: calc(100% - 248.96px);
				max-width: 308.88px;
			}
		}
	}
	@include media-breakpoint-up(lg) {
		.topic {
			width: calc(100% - 311.1px);
			padding: 0 45.73px;
			.text {
				.mobile {
					display: none;
				}
			}
		}
		.line-3 {
			.topic {
				width: calc(100% - 207.4px);
			}
		}
	}
	@include media-breakpoint-up(xl) {
		padding: 513px 0 0 0;
		.text-carousel {
			height: 103px;
			top: 209px;
			.animation-text {
				font-size: 100px;
				line-height: 103px;
				left: -2353px;
				animation: moveRight5 5s linear infinite;
				.logo {
					width: 48px;
					margin: 0 55px;
				}
			}
		}
		.column {
			width: 149px;
			height: 449px;
		}
		.topic {
			width: calc(100% - 596px);
			height: 449px;
			padding: 0 67px;
			.text {
				h3 {
					font-size: 59px;
					line-height: 59px;
				}
				p {
					font-size: 22px;
					line-height: 35px;
				}
			}
		}
		.line-2,
		.line-4 {
			.topic {
				padding: 0 16px 0 26px;
			}
		}
		.line-1 {
			.topic {
				padding-right: 17px;
			}
			.image {
				width: 357px;
				margin-right: 27px;
			}
			.text {
				width: calc(100% - 373px);
			}
		}
		.line-2 {
			.image {
				width: 357px;
				margin-right: 67px;
			}
			.text {
				width: calc(100% - 424px);
				max-width: 380px;
			}
		}
		.line-3 {
			.topic {
				width: calc(100% - 298px);
			}
			.image {
				width: 356.46px;
				margin-right: 26px;
			}
			.text {
				width: calc(100% - 368.46px);
				max-width: 574px;
			}
		}
		.line-4 {
			.image {
				width: 357px;
				margin-right: 71px;
			}
			.text {
				width: calc(100% - 428px);
				max-width: 470px;
			}
		}
		.line-5 {
			.topic {
				padding-right: 16px;
			}
			.image {
				width: 353.46px;
				margin-right: 42px;
			}
			.text {
				width: calc(100% - 368.46px);
				max-width: 453px;
			}
		}
	}
	@include media-breakpoint-up(xxl) {
		.topic {
			width: calc(100% - 745px);
		}
		.line-3 {
			.topic {
				width: calc(100% - 596px);
			}
		}
	}
}
@keyframes moveRight4 {
	from {
		left: -2046px;
	}
	to {
		left: -1473px;
	}
}
@keyframes moveRight5 {
	from {
		left: -2353px;
	}
	to {
		left: -1613px;
	}
}
