@layer blocks {
	.banner {
		display: grid;
		isolation: isolate;
		position: relative;

		&.align-content-right {
			justify-items: end;
		}
	}
	
	.banner-images {
		display: grid;
		inset: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;

		& picture {
			grid-column: 1;
			grid-row: 1;
		}

		& img {
			block-size: 100%;
			inline-size: 100%;
			object-fit: cover;

			.image-position-left & {
				object-position: left;
			}
		}

		& p {
			margin: 0;
		}
	}

	.banner-content {
		display: grid;
		gap: 20px;
		padding: calc(60% - 48px) 45px 30px;

		@media (width >= 48em) {
			max-inline-size: 50%;
			padding: 45px;
		}
	}
}