/* Contact channel cards (template-parts/contact-channels.php): contact and
   contact form sections. */

.section-contact__channels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

/* Icon beside the title; text below; the link at the bottom, so cards side
   by side line their links up. */
.section-contact__channel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: var(--space-3) var(--space-4);
	align-items: center;
}

.section-contact__text,
.section-contact__link {
	grid-column: 1 / -1;
}

.section-contact__icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface-accent);
	color: var(--color-accent);
}

.section-contact__title {
	margin: 0;
	font-size: var(--step-1);
}

.section-contact__text {
	align-self: start;
	margin: 0;
	color: var(--color-text-muted);
}

.section-contact__link {
	align-self: end;
	justify-self: start;
	padding-top: var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--step-1);
	font-weight: 600;
	overflow-wrap: anywhere;
}