.c-homes-header {
	overflow: hidden;

	.c-homes-header__container {
		position: relative;
		display: flex;

		@media (width <= 768px) {
			flex-direction: column;
			gap: var(--spacing-md);
			order: 1;
			padding-top: var(--spacing-lg);
			padding-bottom: var(--spacing-lg);
		}
	}

	.c-homes-header__column {
		@media (width > 768px) {
			width: 50%;
		}

		&.c-homes-header__column--text {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: var(--spacing-md);

			@media (width <= 768px) {
				order: 1;
			}

			@media (width > 768px) {
				padding: calc(var(--spacing-md) * 2) calc(var(--spacing-md) * 2) calc(var(--spacing-md) * 2) 0;
			}

			p {
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}

		&.c-homes-header__column--image {
			position: relative;


			@media (width > 768px) {
				padding-bottom: 40px;
			}

			@media (width <= 768px) {
				position: relative;
				margin: calc(var(--spacing-lg) * -1) calc(var(--gutter) * -1) 0;
				aspect-ratio: 2;
				order: 0;
			}

			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100vw;
				height: 100%;
				background-color: var(--color-white);
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}

	.c-homes-header__green-flag {
		@media (width <= 768px) {
			align-self: flex-end;
		}

		@media (width > 768px) {
			position: absolute;
			top: var(--spacing-xs);
			right: var(--spacing-xs);
		}

		img {
			width: 140px;
			height: auto;

			@media (width <= 1280px) {
				width: 100px;
			}
		}
	}


	.c-homes-header__title {
		@media (width > 768px) and (width <= 1280px) {
			font-size: calc(1.375rem + 1.5vw);
		}
	}

	.c-homes-header__details {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-xs);
	}

	.c-homes-header__detail {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);
		font-weight: bold;

		svg {
			width: 20px;
			height: auto;
		}
	}

	.c-homes-header__button-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--spacing-md) / 2);
	}

	.c-homes-header__image-wrapper {
		position: relative;
		height: 100%;

		.swiper {
			height: 100%;
		}
	}

	.c-homes-header__controls {
		position: absolute;
		bottom: 10px;
		left: 10px;
		display: flex;
		align-items: center;
		gap: 15px;

		.swiper-button-prev,
		.swiper-button-next {
			position: initial;
			display: flex;
			height: 20px;
			width: 30px;
			margin: 0;
			background: none;
			color: var(--color-grey);
			transition: all 0.3s;

			@media (width <= 768px) {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--color-primary);
				border-radius: 50%;
				width: 36px;
				height: 36px;
				color: var(--color-white);
			}

			&:hover,
			&:focus {
				color: var(--color-primary);

				@media (width <= 768px) {
					color: var(--color-white);
				}
			}

			svg {
				@media (width <= 768px) {
					width: 18px;
					height: 18px;
				}
			}
		}
	}

	.c-homes-header__scroll {
		position: absolute;
		bottom: 0px;
		right: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-primary);
		border-radius: 50%;
		width: 36px;
		height: 36px;
		outline: 0;
		padding: 0;
		margin: 0;
		border: 0;
		color: var(--color-white);
		transition: background-color 0.3s;

		@media (width <= 768px) {
			display: none;
		}

		&:hover,
		&:focus {
			background-color: var(--color-secondary);
		}

		svg {
			width: 18px;
			height: 18px;
		}
	}
}