:root {
  --container-width: 700px;
  --columns: 12;
  --gap: 20px;
  --column-width: calc((var(--container-width) / var(--columns)) - var(--gap));
  --breakpoint: 46em;
}

img {
  max-width: 100%;
}


.image-edge-grid {
	margin-bottom: 2rem;
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: minmax(1em, 1fr) repeat(var(--columns), minmax(0, var(--column-width))) minmax(1em, 1fr);
    max-width: initial;
	
	
}




.image-edge-grid__img {
  grid-column-start: 1;
  grid-column-end: 15;
  display: flex;
  align-items: center;
	
	@media (min-width: 46em) {
		grid-column-start: 1;
    	grid-column-end: 8;
	}
}


.image-edge-grid__content {
	grid-column-start: 2;
	grid-column-end: 14;
	display: flex;
	align-items: center;
	background: plum;

	@media (min-width: 46em) {
		
		background: lime;
		grid-column-start: 8;
		grid-column-end: 14;
	}
}

.image-edge-grid[data-reversed]
{
	.image-edge-grid__content
	{
		background: mistyrose;
		grid-column: 2/8;
		grid-row: 1;
	}
	
	.image-edge-grid__img
	{
		grid-column: 8/15;
grid-row: 1
	}
}