.hero-home {
	.container {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-20);

		@media (width > 1000px) {
			--block-padding: var(--spacing-20);
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: var(--block-padding);
			padding-block-start: var(--block-padding);
			padding-block-end: calc(var(--spacing-60) + var(--block-padding));
			position: relative;
		}

		@media (width > 1280px) {
			--block-padding: var(--spacing-80);
		}
	}
}

.hero-home__text {
	color: var(--white);
	text-align: center;
	position: relative;
	gap: var(--spacing-10);
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: var(--l);

	@media (width > 1000px) {
		text-align: start;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-40);

		@media (width > 1000px) {
			align-items: start;
		}
	}
}

.hero-home__title {
	margin: var(--spacing-10) 0;
	font-size: var(--step-3);
	line-height: 1.1;

	@media (width > 1000px) {
		margin: 0;
		padding-right: 40%;
	}

	@media (width > 1280px) {
		padding-right: 20%;
		font-size: var(--step-4);
	}
}

.hero-home__excerpt {
	margin: 0;
	max-width: var(--xl);

	@media (width > 1000px) {
		.header--home & {
			padding-right: 40%;
		}
	}

	@media (width > 1280px) {
		.header--home & {
			padding-right: 20%;
		}
	}
}

.hero-home__ctas {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);

	@media (width > 768px) {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	@media (width > 1000px) {
		justify-content: start;
	}

	.header--home & {
		flex-direction: column-reverse;

		@media (width > 768px) {
			flex-direction: row;
		}
	}
}

.hero-home__phone-number {
	font-size: var(--step-1);
	font-weight: 500;
	color: var(--white);
	text-decoration: none;
}

.hero-home__image.image {
	--circle-size: 45vw;
	--circle-max-size: 400px;

	left: calc(var(--spacing-40) * -1);
	position: relative;
	right: calc(var(--spacing-40) * -1);
	width: calc(100% + (var(--spacing-40) * 4));
	max-width: none;

	@media (width > 768px) {
		left: calc(var(--spacing-60) * -1);
		width: calc(100% + (var(--spacing-60) * 3));
	}

	@media (width > 1000px) {
		position: absolute;
		right: calc(var(--circle-size) / -7);
		bottom: calc(var(--circle-size) / -10);
		left: auto;
		width: var(--circle-size);
		height: var(--circle-size);
		max-width: var(--circle-max-size);
		max-height: var(--circle-max-size);
	}

	@media (width > 1280px) {
		--circle-max-size: 700px;
	}

	.image__img {
		aspect-ratio: 16 / 9;

		@media (width > 1000px) {
			aspect-ratio: 1 / 1;
			object-fit: cover;
			width: 100%;
			height: 100%;
			border-radius: 9999px;
		}
	}
}