/*
 * Mobile-first breakpoints. Base rules elsewhere in this theme already target
 * small screens (2-column grids); this file widens the grid as space allows.
 */

@media (min-width: 600px) {
	ul.products,
	.keepsakes-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	ul.products,
	.keepsakes-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.keepsakes-intro {
		font-size: var(--keepsakes-font-size-xl);
	}
}

@media (max-width: 599px) {
	.keepsakes-container {
		padding-inline: var(--keepsakes-space-3);
	}
}