.hero {
	position: relative;
	width: 100%;
	height: 90vh;
	background-image: url('../assets/images/background.webp');
	background-size: cover; /* Растягивает изображение, заполняя весь блок (обрезает края) */
	background-repeat: no-repeat;
	background-position: center; /* Центрирует обрезанное изображение */
	background-color: #f0f0f0; /* Фон, если изображение не загрузится */
	background: linear-gradient(to bottom, rgba(52, 152, 219, 0) 30%, var(--background-color) 100%), url("../assets/img/background.webp") top center;

}

.hero__content {
  padding-top: 68px; /* Отступы для контента */
  padding: calc(68px + 10%) 15%;
}

.hero__title {
	margin-top: 75px;
	font-size: 48px;
	max-width: 50%;
}

.hero__description {
	font-size: 18px;
	max-width: 50%;
	letter-spacing: 0.02rem;
	margin-top: 25px;
}

.hero__play {
	padding: 8px 16px;
	font-size: 24px;
	margin-top: 10px;
	background-color: #3C8527;
	color: white;
	box-shadow: inset 0 -6px 0 #2A641C,inset 0 6px 0 #52A535;
	letter-spacing: .03em;
	border: none;
}

.hero__play:hover {
	background-color: #2A641C;
	box-shadow: none;
}

@media only screen and (max-width: 600px) {
	.hero {
		height: 60vh;
		margin-bottom: 150px;

	}
	.hero__content {
		padding: 68px 5% 68px;
	}
	.hero__title {
		max-width: 95%;
		font-size: 36px;
	}
	.hero__description {
		max-width: 95%;
	}
}
@media only screen and (min-width: 601px) and (max-width: 1200px) {
	.hero {
		height: 60vh
	}
	.hero__content {
		padding: calc(68px + 10%) 10% 0px;
	}
	.hero__title {
		max-width: 85%;
		font-size: 36px;
	}
	.hero__description {
		max-width: 95%;
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
	.hero {
		height: 80vh
	}
	.hero__content {
		padding: calc(68px + 10%) 10% 0px;
	}
	.hero__title {
		max-width: 85%;
		font-size: 36px;
	}
	.hero__description {
		max-width: 95%;
	}
}