/* Section: contact. The details list and the form themselves are styled in base.css (components). */
.s-contact { background: var(--wp--preset--color--surface-alt); }
/* Right under the page header's band, or after a hero on the same soft background, the two would merge into one long empty
   band: the details then take the page's own background. */
.page-header + .s-contact,
.s-hero:not(.s-hero--cover) + .s-contact { background: var(--wp--preset--color--surface); }
.s-contact__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
@media (min-width: 900px) {
	.s-contact--form .s-contact__grid { grid-template-columns: 1fr 1.3fr; }
}
/* Without the form, the details spread across the width. */
.s-contact--plain .contact-details { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--wp--preset--spacing--30); }