/* A grid of book cards */

/*
 * Five across, then three, then two -- the rhythm the home page already uses
 * for this card. The builder's shop ran five at 223px columns; this follows
 * the container instead of a fixed width.
 */
.saqi-product-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 3rem 1.5rem;
}

@media (max-width: 63.9375rem) {
	.saqi-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 47.9375rem) {
	.saqi-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1rem;
	}
}

/*
 * The list variant is the same card, wider -- the shop's presentation.
 * Four across beside the browse column, with the same gap as the shop
 * split so the sidebar comes out exactly one card wide. Measured off the
 * builder's shop loop (dev /books/ at 1330px, 30px gaps).
 */
.saqi-product-grid--list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.875rem;
}

@media (max-width: 63.9375rem) {
	.saqi-product-grid--list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 47.9375rem) {
	.saqi-product-grid--list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1rem;
	}
}

/* One book a row on a phone held upright (Will, 2026-09-17); two when it is
   turned, where the screen is wide enough to carry them. */
@media (max-width: 47.9375rem) and (orientation: portrait) {
	.saqi-product-grid--list {
		grid-template-columns: minmax(0, 1fr);
	}
}