/* layout-side-by-side */
div.main::before {
    content: "";
    display: block;
    height: 100vh;
    margin-top: -200px;
    overflow: hidden;
    width: 100%;
}
div.main {
    min-height: 100vh;
}
div.main > section {
    background: #fff;
    box-sizing: border-box;
    display: block;
    padding: 20px;
}
div.main > section + section {
    margin-top: 20px;
}
footer.main {
    min-height: calc(100vh + 20px);
}

@media (min-width: 768px) {
    div.main::before {
	height: 25vh;
	margin-top: 0;
    }
    div.main {
	min-height: 75vh;
    }
    div.main > section + section {
	margin-top: 50px;
    }
    footer.main {
	min-height: 25vh;
    }
}

/* use a ::before pseudoelement before each content section on which to render a background image. 
 * this image will appear before the content on mobile layout and next to the content on desktop layout. */
div.main section.content::before {
    content: "";
    display: block;
    margin: -20px -20px 0 -20px;
    min-height: 50vh;
}

@media (min-width: 768px) {
    /* move our images to side-by-side in desktop layout. */
    div.main section.content {
	min-height: 400px;
	position: relative;
    }
    div.main section.content header,
    div.main section.content p {
	box-sizing: border-box;
	width: 50%;
    }
    div.main section.content::before {
	margin: 0px;
	min-height: 0vh;
	position: absolute;
	top: 0;
	bottom: 0;
    }

    /* odd-numbered content sections have text on left, image on right */
    div.main section.content:nth-of-type(odd) header,
    div.main section.content:nth-of-type(odd) p {
	padding-right: 20px;
    }
    div.main section.content:nth-of-type(odd)::before {
	left: 50%;
	right: 0;
    }   

    /* even-numbered content sections have image on left, text on right */
    div.main section.content:nth-of-type(even) header,
    div.main section.content:nth-of-type(even) p {
	padding-left: 20px;
	transform: translateX(100%);
    }
    div.main section.content:nth-of-type(even)::before {
	left: 0;
	right: 50%;
    }
}