.imagewithcontent
{
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr;
	align-content: center;
	width: 100%;
	box-sizing: border-box;
}
.imagewithcontent > * { box-sizing: border-box; }

.imagewithcontent > .image { grid-area: i; display: flex; flex-flow: column; height: 100%; justify-content: stretch; align-items: stretch; }
.imagewithcontent > .image picture { flex: 1 1 auto; }
.imagewithcontent > .image picture :is(a, picture, img) { width: 100%; height: 100%; }
.imagewithcontent > .image img { object-fit: cover; }

.imagewithcontent > .content { grid-area: c; display: flex; flex-flow: column nowrap; justify-content: center; }
.imagewithcontent > .content > .wrapper { padding: var(--columns-gutter-y, 1rem) var(--columns-gutter-x, 1rem); box-sizing: border-box; }
.pageroot .imagewithcontent > .content > .wrapper { padding: 0; }


/*  layout  */
.imagewithcontent,
.imagewithcontent-layout-top {
	grid-template-rows: repeat(2, auto);
	grid-template-areas:
		"i i i i i i i i i i i i"
		"c c c c c c c c c c c c";
}
.imagewithcontent-layout-bottom {
	grid-template-rows: repeat(2, auto);
	grid-template-areas:
		"c c c c c c c c c c c c"
		"i i i i i i i i i i i i";
}
.imagewithcontent-layout-left-one-two {
	grid-template-rows: 1fr;
	grid-template-areas:
		"i i i i c c c c c c c c";
}
.imagewithcontent-layout-left-one-one {
	grid-template-rows: 1fr;
	grid-template-areas:
		"i i i i i i c c c c c c";
}
.imagewithcontent-layout-left-two-one {
	grid-template-rows: 1fr;
	grid-template-areas:
		"i i i i i i i i c c c c";
}
.imagewithcontent-layout-right-one-two {
	grid-template-rows: 1fr;
	grid-template-areas:
		"c c c c i i i i i i i i";
}
.imagewithcontent-layout-right-one-one {
	grid-template-rows: 1fr;
	grid-template-areas:
		"c c c c c c i i i i i i";
}
.imagewithcontent-layout-right-two-one {
	grid-template-rows: 1fr;
	grid-template-areas:
		"c c c c c c c c i i i i";
}

:is(main, .container):has(> .imagewithcontent) { container-type: inline-size; container-name: imagewithcontent; }
@container imagewithcontent (max-width: 64rem) {
	.imagewithcontent-layout-left-two-one, .imagewithcontent-layout-left-one-two,
	.imagewithcontent-layout-right-two-one, .imagewithcontent-layout-right-one-two {
		grid-template-rows: repeat(2, auto);
		grid-template-areas:
			"i i i i i i i i i i i i"
			"c c c c c c c c c c c c";
	}
}
@container imagewithcontent (max-width: 48rem) {
	.imagewithcontent-layout-left-one-one,
	.imagewithcontent-layout-right-one-one {
		grid-template-rows: repeat(2, auto);
		grid-template-areas:
			"i i i i i i i i i i i i"
			"c c c c c c c c c c c c";
	}
}


/*  background colors  */
.imagewithcontent-bgcolor-white { background: #FFFFFF; }
.imagewithcontent-bgcolor-lightgrey { background: #F0F0F0; }
.imagewithcontent-bgcolor-grey { background: #AAAAAA; }
.imagewithcontent-bgcolor-darkgrey { background: #666666; color: #FFFFFF; }
.imagewithcontent-bgcolor-black { background: #000000; color: #FFFFFF; }