body {
	min-height: 110vh;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2px;
}

.filters__button,
.filters__button:hover {
	padding: .2em .75em;
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 100vh;
}

.filters__button:hover {
	background-color: #9c9c9c6c;
}

.filters__button--selected,
.filters__button--selected:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

.creation-list {
	display: flex;
	gap: 32px;
	flex-direction: column;
	margin-top: 20px;
	list-style: none;
}

.creation-list__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-bottom: 16px;
	border: 2px solid gray;
	box-shadow: 6px 6px #e6e6e6;
}

.creation-list__item--filtered {
	display: none;
}

.creation-list__item h2 {
	margin-top: 8px;
}

.creation-list__item > * {
	margin-left: 8px;
	margin-right: 8px;
}

.horizontal-gallery {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0 16px;
	overflow-x: scroll;
}

.horizontal-gallery::before {
	content: '↡   začátek   ↡';
	margin-top: 8px;
	color: gray;
	text-align: center;
	font-weight: bold;
	writing-mode: vertical-lr;
	white-space: pre;
	transform: rotate(180deg);
}

.horizontal-gallery::after {
	content: '↡   konec   ↡';
	margin-top: 8px;
	color: gray;
	text-align: center;
	font-weight: bold;
	writing-mode: vertical-lr;
	white-space: pre;
}

.horizontal-gallery img {
	width: min(calc(100vw - 100px), 100vw);
	width: auto;
	max-width: none;
	height: 200px;
	max-height: none;
	image-rendering: auto;
}

@media (prefers-color-scheme: dark) {
	.creation-list__item {
		box-shadow: none;
	}
}