@import url("variables.css");

.ravioli-engagements {
	padding-block: var(--wp--preset--spacing--7xl);
	padding-top: var(--wp--preset--spacing--5xl) !important;
}

.ravioli-engagements__title {
	margin: 0 0 var(--wp--preset--spacing--5xl);
}

.ravioli-engagements__row {
	align-items: center;
	gap: var(--wp--preset--spacing--3xl);
	margin-bottom: var(--wp--preset--spacing--7xl);
}

.ravioli-engagements__row:last-child {
	margin-bottom: 0;
}

.ravioli-engagements__row:nth-child(even) .ravioli-engagements__col--media {
	margin-top: calc(var(--wp--preset--spacing--3xl) * -1);
}

.ravioli-engagements__heading {
	margin: 0 0 var(--wp--preset--spacing--medium);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-family: var(--wp--preset--font-family--sofia-rough);
}

.ravioli-engagements__text {
	margin: 0;
}

.ravioli-engagements__cans {
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--large);
	aspect-ratio: 572 / 311;
	padding: var(--wp--preset--spacing--xl);
	border-radius: 24px;
}

.ravioli-engagements__can {
	flex: 0 1 auto;
	margin: 0;
}

.ravioli-engagements__can img {
	width: auto;
	height: 100%;
	max-height: 220px;
	object-fit: contain;
}

@media (max-width: 782px) {
	.ravioli-engagements__row {
		margin-bottom: var(--wp--preset--spacing--5xl);
	}

	.ravioli-engagements__row:nth-child(1),
	.ravioli-engagements__row:nth-child(3){
		flex-direction: column-reverse;
	}

	.ravioli-engagements__row:nth-child(even) .ravioli-engagements__col--media {
		margin-top: 0;
	}

	.ravioli-engagements__cans {
		aspect-ratio: auto;
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--large);
	}

	.ravioli-engagements__can img {
		max-height: 160px;
	}
}