.hero-banner {
	margin-bottom: 50px;

	.container {
		max-width: 1392px;
	}

	.img_box {
		position: relative;
		padding-top: 39.7%;
		overflow: hidden;

		.img {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: bottom;
			border-radius: 24px;
		}

		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 88%;
			background: linear-gradient(180deg, rgba(243, 239, 235, 0) 0%, var(--brown-10) 100%);
		}

		.logo {
			position: absolute;
			bottom: 24px;
			right: 24px;
			width: 140px;
			z-index: 3;
		}

		.line {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}
	}

	.text_box {
		position: absolute;
		bottom: 22%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		padding: 0 16px;

		h1 {
			margin-bottom: 16px;
		}

		.button {
			margin-top: 24px;
		}
	}

	@media(max-width: 1199px) {
		.text_box {
			bottom: 15%;

			img {
				display: block;
				width: 90px;
				margin: 0 auto 20px;
			}
		}

		.img_box {
			padding-top: 56.7%;

			&:after {
				height: 75%;
			}

			.logo {
				display: none;
			}
		}
	}

	@media(max-width: 767px) {
		.img_box {
			padding-top: 168.5%;

			&:after {
				height: 71.5%;
			}

			.line {
				bottom: auto;
				top: 60%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.text_box {
			img {
				width: 123px;
				margin-bottom: 32px;
			}
		}
	}
}