/**
 * Layout reutilizável (opt-in no Bricks).
 *
 * Split: .croco-split > .croco-content | .croco-media
 *        (ou .croco-split__main | .croco-split__aside)
 * Stack: .croco-stack — pilha vertical (ex.: cards em .croco-media)
 */

.croco-split {
	--croco-split-gap: clamp(1.75rem, 4vw, 3rem);
	--croco-split-main: minmax(0, 1.15fr);
	--croco-split-aside: minmax(0, 0.85fr);

	display: grid;
	gap: var(--croco-split-gap);
	align-items: start;
	width: 100%;
}

@media (min-width: 768px) {
	.croco-split {
		grid-template-columns: var(--croco-split-main) var(--croco-split-aside);
	}
}

.croco-split > :where(
	.croco-content,
	.croco-split__main,
	.croco-media,
	.croco-split__aside
) {
	min-width: 0;
}

.croco-stack {
	display: flex;
	flex-direction: column;
	gap: var(--croco-stack-gap, clamp(1.1rem, 2.5vw, 1.5rem));
}