.salons-banner {
	padding-top: 56px;
	padding-bottom: 36px;
	overflow: hidden;

	.grid_wrapper {
		display: grid;
		grid-template-columns: 41% 1fr;
		grid-gap: 9.7%;
	}

	.grid_gallery {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 16px;
		align-items: center;
	}

	.grid_gallery {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 16px;
		grid-template-rows: 285px 250px;

		.img_box {
			height: 100%;
			border-radius: 16px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
			}
		}

		.img_box:nth-child(1) {
			grid-row: 1 / 3;
			height: auto;
			aspect-ratio: 1 / 1.42;
		}

		.bg {
			position: absolute;
			top: 44%;
			left: 44%;
			transform: translate(-50%, -50%);
			width: 60vw;
			max-width: none;
			object-fit: contain;
			z-index: -1;
		}
	}

	.text_box {
		h1 {
			margin-bottom: 32px;
		}

		.content_box {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

		.button {
			margin-top: 32px;
			min-width: 200px;
		}
	}

	@media(max-width: 1199px) {
		padding-top: 24px;

		.grid_wrapper {
			grid-template-columns: 48% 1fr;
			grid-gap: 16px;
		}

		.grid_gallery {
			grid-template-rows: 165px 165px;
		}

		.text_box {
			li:not(:last-child) {
				margin-bottom: 16px;
			}
		}
	}

	@media(max-width: 767px) {
		.grid_wrapper {
			grid-template-columns: 100%;
			grid-gap: 40px;
		}

		.grid_gallery {
			order: -1;
			grid-template-rows: 150px 130px;

			.bg {
				width: 147vw;
			}
		}
	}
}