.images-side-by-side {
	position: relative;
	container-type: inline-size;
	margin-bottom: var(--widget-margin-bottom);
	overflow: hidden;

	.widget-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		align-content: start;
		gap: 26px;
	}

	.images-row {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 42.03% 15.07% minmax(0, 1fr);
		align-items: start;
		order: -1;
		padding: 109px 15px 0;
	}

	.image-1,
	.image-2 {
		position: relative;
		grid-row: 1;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);

		.slide-img {
			width: 100%;
		}
	}

	.image-1 {
		grid-column: 1 / 3;
	}

	.image-2 {
		z-index: 2;
		grid-column: 2 / 4;
		margin-top: 16vw;
	}

	.background {
		position: absolute;
		inset: 0 0 16vw;
		z-index: -1;
		pointer-events: none;

		&::before {
			position: absolute;
			inset: 0;
			z-index: 2;
			display: block;
			content: '';
			background: linear-gradient(0deg, rgba(249, 247, 242, 0) 0%, rgba(249, 247, 242, 0.85) 75%);
		}

		.slide-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.header {
		display: flex;
		align-items: start;
		gap: 15px;
		padding: 0 15px;
	}

	.badge {
		order: -1;
		width: 63px;
		flex-shrink: 0;
	}

	.header-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 10px;
	}

	.title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: 1.375rem;
		line-height: 1;
		color: var(--brown-dark);
	}

	.desc {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-sm);
		line-height: 1.3;
		color: var(--gray);
	}

	.read-more {
		justify-self: start;
		margin-top: var(--space-2);
	}

	@container (min-width: 64em) {
		.widget-inner {
			position: relative;
			z-index: 2;
			grid-template: auto auto / 45.08% 4.92% minmax(0, 1fr);
			gap: 0;
			padding: 143px 110px 0;
		}

		.images-row {
			display: contents;
		}

		.image-1 {
			grid-row: 1 / 3;
			margin-top: 5.42vw;
		}

		.image-2 {
			margin: 0;
		}

		.background {
			bottom: auto;
			height: 41.11vw;
		}

		.header {
			grid-row: 2;
			grid-column: 3 / 4;
			gap: 27px;
			max-width: var(--width-comfortable);
			padding: 0;
			margin: var(--space-8) 0 0 30px;
		}

		.badge {
			width: 110px;
		}

		.title {
			font-size: 1.625rem;
		}

		.desc {
			font-size: 0.9375rem;
		}
	}
}