.about-us-banner {
	--brad: 16px;

	.text_box {
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		z-index: 1;

		h1 {
			span {
				--r: var(--brad);
				--p: 10px;

				position: absolute;
				top: calc(100% + 16px);
				left: 0;
				display: inline-block;
				padding-right: 60px;
				padding-bottom: 24px;
				background-color: var(--white-50);
				border-bottom-right-radius: var(--brad);

				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 100%;
					width: calc(var(--r) * 2);
					height: calc(var(--r) * 2);
					border-top-left-radius: var(--r);
					box-shadow: calc(var(--p) * -1) calc(var(--p) * -1) 0 0 var(--white-50);
				}

				&:after {
					content: '';
					position: absolute;
					top: 100%;
					left: 0;
					width: calc(var(--r) * 2);
					height: calc(var(--r) * 2);
					border-top-left-radius: var(--r);
					box-shadow: calc(var(--p) * -1) calc(var(--p) * -1) 0 0 var(--white-50);
				}
			}
		}

		p {
			max-width: 525px;
		}
	}

	.img_box {
		position: relative;
		padding-top: 40%;
		overflow: hidden;
		border-radius: var(--brad) var(--brad) 0 var(--brad);

		img {
			display: block;
			object-fit: cover;
			object-position: bottom;
		}
	}

	@media(max-width: 1199px) {
		.text_box {
			flex-direction: column;
			gap: 24px;

			h1 {
				max-width: 100%;

				span {
					all: unset;

					&:before, &:after {
						display: none;
					}
				}
			}

			p {
				max-width: 100%;
			}
		}

		.img_box {
			padding-top: 57%;
		}
	}

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