main {
	padding: 0 var(--sp-M) var(--sp-XL) var(--sp-M);
}
h1, h2 {
	text-align: center;
}
.books {
	padding-bottom: var(--sp-XL);
	gap: var(--sp-XL);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.aquarell, .coloring {
	gap: var(--sp-S);
}
.aquarell p, .coloring p {
	text-align: center;
}
.price-single {
	gap: var(--sp-S);
	justify-content: center;
	align-items: center;
}
.choose-amount {
	gap: var(--sp-XS);
	justify-content: center;
	align-items: center;
}
.choose-amount input {
	width: 5rem;
}
.price-summary {
	max-width: 30rem;
	width: 100%;
	padding-bottom: var(--sp-XL);
	align-self: center;
}
.price-summary > small {
	padding-bottom: var(--sp-M);
}
.discount {
	color: var(--fg-posi);
}
.order-form {
	max-width: 30rem;
	width: 100%;
	gap: var(--sp-L);
	align-self: center;
}
.postal-code-and-city {
	gap: var(--sp-M);
}
.postal-code-and-city > *:last-child {
	flex-grow: 1;
}
.checkbox-field {
	gap: var(--sp-M);
	flex-wrap: nowrap;
	justify-content: space-between;
}
.checkbox-field > *:first-child {
	flex-grow: 1;
}
.checkbox-field > *:last-child {
	flex-shrink: 0;
}
.checkbox-field	> input[type="checkbox"] {
	width: 1.5rem;
}
.order-form input[type="submit"] {
	align-self: center;
}
@media screen and (min-width: 40rem) {
	h1 {
		font-size: 2.5rem;
	}
}