/**
 * Payment logos: .mk-payment-logos (templates/components/payment-logos.php).
 * One centred row (or from the start: --start), gap 12; small logos 14 high,
 * large 16, card 24 (width follows the logo's own proportions).
 */

.mk-payment-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--payment-logos--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-payment-logos__item {
	display: flex;
}

.mk-payment-logos__item img {
	display: block;
	inline-size: auto;
	block-size: var(--wp--custom--payment-logos--small-height);
}

.mk-payment-logos__item--large img {
	block-size: var(--wp--custom--payment-logos--large-height);
}

/* Card logos 24 high (38 × 24 files with their own frame), e.g. on text pages. */
.mk-payment-logos__item--card img {
	block-size: var(--wp--custom--payment-logos--card-height);
}

.mk-payment-logos--start {
	justify-content: flex-start;
}