/**
 * Contact, hero — one section of the design.
 *
 * The page's own name, and nothing else standing with it.
 */

.custom-contact-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
}

.custom-contact-hero__heading {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

/* Tablet and mobile — the file draws one of them: the name stands 10 in from
   the top and the foot of its own box (11186:13229), and that box stands 24
   above the band beneath it (11186:13607). The two are one band here, so the
   24 is the band's own foot. Tablet is not drawn and is given a little more
   room above and below. */
/* The heroes of the contact, blog and events pages stand at one set of
   figures on every tier, as asked: 96 above and below on the wide tier, 48
   and 72 on tablet, 10 and 34 on mobile. */
@media ( max-width: 1024px ) {
	.custom-contact-hero {
		padding: 10px 16px 34px;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-contact-hero {
		padding: 48px 16px 72px;
	}
}