/* Charcoal, not off-white. The navbar is fixed and this section scrolls under
   it mid-way through the pinned stack, so a light panel here would strand the
   gold nav links on a background they cannot be read against. */
.section_vv {
	z-index: 1;
	background-color: var(--vv-charcoal);
	width: 100vw;
	height: 100vh;
	position: relative;
}
.vv_container {
	justify-content: center;
	align-items: stretch;
	height: 100%;
	display: flex;
}
.vv_content {
	/* The paragraphs would otherwise inherit charcoal body type onto a charcoal
	   panel and vanish. */
	color: var(--vv-off-white);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	/* 24rem, not the template's 17.625rem: the Greek definitions are full
	   paragraphs, and in the narrower column their long words left the
	   justified lines full of gaps. hero-stack.js measures the block before
	   sliding it to the centre line, so the width is free to change. */
	width: 24rem;
	display: flex;
}
.vv_content_head {
	grid-column-gap: 0.5rem;
	grid-row-gap: 0.5rem;
	color: var(--vv-gold);
	flex-flow: column;
	display: flex;
}
.vv_wrapper {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	display: flex;
}
@media screen and (max-width: 991px) {
	.section_vv {
		height: calc(var(--vh) * 100);
	}
	/* 18rem, not 11.75rem — same reason as the desktop width above; two of
	   these side by side still fit a 768px tablet. Nothing in hero-stack.js
	   moves these blocks below 992px, so this is plain layout. */
	.vv_content {
		width: 18rem;
	}
	.vv_content.one {
		margin-top: -8rem;
	}
	.vv_content.two {
		margin-bottom: -8rem;
	}
}
@media screen and (max-width: 767px) {
	/* Full width, one above the other: at the old half-width offset columns
	   the Greek paragraphs ran to 25 lines and the second block fell off the
	   bottom of the screen. */
	.vv_content {
		width: 100%;
	}
	.vv_content.one {
		margin-top: 0;
		margin-right: auto;
	}
	.vv_content.two {
		margin-bottom: 0;
		margin-left: auto;
	}
	.vv_wrapper {
		flex-flow: column;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}
@media screen and (max-width: 479px) {
	.vv_content {
		width: 100%;
	}
	.vv_content.one {
		order: -9999;
		margin-top: 0;
		margin-right: auto;
	}
	.vv_content.two {
		order: 9999;
		margin-bottom: 0;
		margin-left: auto;
	}
	.vv_wrapper {
		justify-content: space-around;
		align-items: center;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}