#filter-column {
	max-width: 350px;
}

#content-column {
	flex-grow: 1;
}

:root {
	--min-card-width: 250px;
}

.filter-results {
	padding: 1em 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width), 1fr));
	gap: .75rem;
}

.filter-results > .card {
	--tblr-card-spacer-x: 0; /* otherwise, tabler adds awkward margins in our case (.card-link + .card-link) */
	min-width: 250px;
	max-width: 500px;
	flex: 1;
	transition: transform .2s ease;
}

.page-body .card .card-img-top,
.page-body .card .card-img-top > * {
	height: 250px;
	object-fit: cover; /* needed for images when obfuscation mode is enabled, to prevent distortion of the thumbhash */
}

.card-link:hover {
	transform: scale(1.05);
}

@media (min-width: 2000px) {
	:root {
		--min-card-width: 350px;
	}
}






















#modal-preview {
	--tblr-btn-disabled-border-color: lightgray;
}

#modal-preview-nav {
	gap: 1em;
}

#modal-preview-content {
	max-height: 1000px;
	max-width: 100%;
}


/* the spacing around these particular SVG chevrons is a bit odd otherwise */
#modal-preview-nav .btn svg {
	margin: 0;
}
#modal-preview-nav .btn.btn-prev svg {
	margin-left: calc(var(--tblr-btn-padding-x) * -.25);
}
#modal-preview-nav .btn.btn-next svg {
	margin-right: calc(var(--tblr-btn-padding-x) * -.25);
}