/* Sayless Fitness: deltas from the approved mock on top of the parent's layout. Generated header; edit brands/saylessfitness.ca.css. */

/* Art-directed mobile crop (generated). */
.bcs-split-media img {
	object-position: 64% 20%;
}

.bcs-split-media {
	aspect-ratio: 1 / 1;
}

@media (max-width: 700px) {
	.bcs-split-media img {
		display: none;
	}

	.bcs-split-media {
		aspect-ratio: auto;
		background: url("../img/hero-v3-mobile.avif") 64% 20% / cover no-repeat;
	}
}

/* Training feel: slanted uppercase headline, lime teasers, image column on the right. */
.bcs-split {
	--bcs-split-min: 800px;
}

.bcs-split-column {
	padding: 36px var(--gutter);
	background: var(--wp--preset--color--ground);
}

.bcs-page .bcs-cover-line {
	font-style: italic;
}

.bcs-split .bcs-teasers {
	color: var(--wp--preset--color--accent);
}

.bcs-split .bcs-card {
	margin-top: 28px;
}

@media (max-width: 1100px) {
	.bcs-split-column {
		padding: 32px 28px;
	}
}

@media (max-width: 700px) {
	/* Phone order: image banner first, then the column. */
	.bcs-split {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.bcs-split-media {
		order: 0;
		height: 120px;
		min-height: 0;
	}

	.bcs-split-column {
		order: 1;
		padding: 20px;
	}

	.bcs-split-column > .bcs-eyebrow {
		font-size: 9px;
	}

	.bcs-page .bcs-cover-line {
		font-size: 26px;
		margin: 10px 0 12px;
	}

	.bcs-page .bcs-cover-line br {
		display: block;
	}

	.bcs-split .bcs-teasers {
		display: none;
	}

	.bcs-split .bcs-card {
		margin-top: 20px;
	}
}