/* "As seen on": logos carousel only (title/background stay in the Elementor
	section where the shortcode is placed). */

.cmath-aso__row,
.cmath-aso__track {
	display: flex;
	align-items: center;
	gap: var(--grid-gutter);
}

/* Without carousel: balanced distribution (with mobile wrap). */
.cmath-aso__row {
	flex-wrap: wrap;
	justify-content: center;
}

.cmath-aso__row .cmath-aso__item {
	flex: 1 1 0;
	min-width: 120px;
}

/* In carousel mode (> per_row): each logo takes 1/per_row of the viewport. */
.cmath-aso__list.cmath-carousel .cmath-aso__item {
	flex: 0 0 calc((100% - (var(--cmath-aso-per-row) - 1) * var(--grid-gutter)) / var(--cmath-aso-per-row));
}

.cmath-aso__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	text-decoration: none;
}

/* The logo image is capped at 193px; the cell fills the slot (viewport/per-row)
	so exactly per_row logos are visible, without peeking next item. */
.cmath-aso__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 193px);
	max-height: 193px;
	object-fit: contain;
}

@media (max-width: 768px) {
	.cmath-aso__list.cmath-carousel .cmath-aso__item {
		flex: 0 0 calc((100% - var(--grid-gutter)) / 2);
	}
}