/**
 * MF Side by Side Feature — Component Styles
 * Two panels side by side on tablet+, stacked on mobile.
 */

/* ============================================================
   Grid — 2 columns on tablet+, single column on mobile
   ============================================================ */
.mf-sbs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
}

@media screen and (min-width: 40em) {
	.mf-sbs__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   Panel
   ============================================================ */
.mf-sbs__panel {
	display: block;
}

/* ============================================================
   Image
   ============================================================ */
.mf-sbs__image-link {
	display: block;
	text-decoration: none;
	margin-bottom: 10px;
}

.mf-sbs__image-link picture {
	display: block;
}

.mf-sbs__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   Content
   ============================================================ */
.mf-sbs__content {
	margin-top: 2%;
}

.mf-sbs__content > * {
	display: block;
	margin-bottom: 0.4em;
}

.mf-sbs__content > *:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Button — pull tight against heading/caption
   ============================================================ */
.mf-sbs__button {
	display: block;
	margin-top: -0.2em;
	line-height: 1;
}