/**
 * "Where to buy" retailer logos.
 *
 * theme.css flows .entry-icons as one centred wrapping row, which put all five
 * retailers on a single line. Capping each row at three gives the 3 + 2 layout,
 * with the short last row centred by the parent's justify-content.
 *
 * The basis subtracts the item's own 10px side margins so three rows fit exactly
 * rather than wrapping to two. Desktop only: the logos are a fixed 185px wide,
 * so three would overflow a narrow screen.
 */

@media (min-width: 992px) {
	/*
	 * Narrow the row so the three cells sit close together. Without this each
	 * cell is a third of the full 1120px block, leaving ~168px of dead space
	 * around every 185px logo.
	 */
	.entry-icons.entry-icons-retailers {
		max-width: 780px;
	}

	.entry-icons.entry-icons-retailers .entry-icon {
		flex: 0 0 calc(33.3333% - 20px);
		max-width: calc(33.3333% - 20px);
	}

	/* Breathing room between the two rows. */
	.entry-icons.entry-icons-retailers .entry-icon:nth-child(n+4) {
		margin-top: 33px;
	}
}