.layout {
  display: flex;
  flex-wrap: wrap;
/* 
 margin-top: -1em;
  margin-left: -3.5em;
*/
  align-items: center;


  /* max-width: 64em; --*/
  margin-right: auto;
  margin-left: auto;
  padding: 1em 1em; /* 3em */
  line-height: 1.5em;
  font-family: sans-serif;
  

}

.layout:not(:first-of-type) {
  margin-top: 3em;
}

.layout:nth-child(even) {
  flex-direction: row-reverse;
}

.layout__item {
  padding-top: 1em;
  padding-left: 0.75em; /* --- 3.5 em --- */
}

.layout__item--body {
  flex-grow: 2; /* 9999 */
  flex-basis: 15rem; /* --- 15 rem --- */
}

.layout__item--figure {
  margin-right: auto;
  flex-grow: 1;
  width: 100%;

  padding-top: 1em; /* - 3.5em -- */

}

/* -------------- */

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.item {
	width: 48%;
	height: 50%;
	margin-bottom: 2%;
	
/*   
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(75deg, #263F3F 90%, gold 10%);
  color: white;
*/	
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
	

.item-gold {
   
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(75deg, #263F3F 90%, red 10%);
  color: white;
}

.item-moonstone {
   
  background-color: #34ADFF;
/*  background-image: -webkit-linear-gradient(75deg, #263F3F 90%, #3BA9CC 10%); */
  background-image: -webkit-linear-gradient(75deg, #263F3F 90%, red 10%);
  color: white;
}


.on-off-br {
	align-self: flex-end;
}


/* -------------- */


@supports (max-width: max-content) {
  .layout__item--figure {
    min-width: 15rem;
    max-width: max-content;
    flex-basis: 15rem;
    flex-grow: 99999;
  }
}

body {
  /*
  max-width: 64em;
  margin-right: auto;
  margin-left: auto;
  padding: 3em 1em;
  line-height: 1.5em;
  font-family: sans-serif;
  */
}

h2 {
  font-size: 2em;
  line-height: 1.2;
}

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}

/*
.layout__item * + * {
  margin-top: 1em;
}
*/