@media screen and (max-width: 1100px)
{

/* BLUE MODE
 * The content box becomes wider yet
 * The article header also becomes wider yet
 * Left/Right figures now become full width and match the height of callout images
 */

article #content
{
/* background-color: lightblue; */
padding: 10%;
width: 80%;
}
	
article header
{
width: 96%;
}

article
{
background-size: auto !important;
}

article figure.left, article figure.right, article figure.large, article figure.callout
{
width: calc(100% - 6vw);
clear: both;
margin: 2em auto;
padding: 3vw;
float: none;

}

article figure.left img, article figure.right img
{
/* match the height of callout images */
max-height: 65vh;
}

figure.extra-large
{
margin-left: -49vw;
}
}