html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font-family: sans-serif;
	background-color: #f3f9ff;
	max-width: 600px;
	margin: 20px auto;
}

.vypis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

.produkt {
	background-color: #ffffff;
}
.produkt__media {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.produkt__media--bota {
	object-position: 50% 30%;
}
.produkt__media--kolo {
	object-position: 50% 100%;
}
.produkt__media--nausnice {
	object-position: 50% 50%;
}
.produkt__media--vaza {
	object-position: 50% 68%;
}
.produkt__obsah {
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
.produkt__nazev {
	margin: 0;
}
.produkt__cena {
	color: #f00000;
}
.produkt__akce {
	margin-top: 16px;
	grid-column: 1/-1;
	text-align: center;
	display: flex;
}

.tlacitko {
	display: inline-block;
	color: #ffffff;
	background-color: #0b7ff4;
	padding: 0.4em 0.8em;
	text-decoration: none;
	flex-grow: 1;
}
.tlacitko:hover,
.tlacitko:focus {
	background-color: #074c92;
}