/* GENERIC */

.pad-m {
	padding: 16px;
}

.l-column {
	display: flex;
	flex-flow: column nowrap;
	gap: 16px;
}

.l-row {
	display: flex;
	gap: 16px;
	align-items: start;
}

.l-wrap {
	flex-wrap: wrap;
}

.l-align-end {
	margin-left: auto;
}



/* CONTENT */

.browse {
	display: grid;
	grid-template-columns: auto 0fr;
	grid-template-areas: "main sidebar";
}

.main-content {
	display: flex;
	flex-flow: column nowrap;
	gap: 16px;
	overflow-x: hidden;
	overflow-y: auto;
	grid-area: main;
}

.filters {
	width: clamp(200px, 28vw, 400px);
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	grid-area: sidebar;
}
.filters.is-hidden {
	display: none;
}

.list {
	padding-left: 8px;
}



/* Browser */

.browser {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-flow: row wrap;
	flex: 0 0 auto;
	align-content: flex-start;
	max-width: calc(244px * 5 + 16px * 4);
	min-height: calc(100vh - 300px);
	margin: 0 auto;
}

.browser__card {
	text-decoration: none;
}

.is-hidden-by-tag,
.is-hidden-by-search {
	display: none !important;
}

.card {
	display: flex;
	flex-direction: column-reverse;
	width: 244px;
	border: 2px solid var(--border-light);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,0.25);
	overflow: hidden;
	color: var(--text);
	text-decoration: none;
	transition: transform 0.18s cubic-bezier(.3,.85,.63,1.2);
}

.card:hover {
	transform: scale(1.035);
}

.card__info {
	padding: 10px;
	line-height: 20px;
}

.card__title {
	font-size: 1.3em;
	font-size: 700;
	margin: 0;
}

.card__author {
	font-style: italic;
}

.card__display {
	position: relative;
	width: 100%;
	height: 135px;
}
.card__display--no-image {
	background-image: repeating-linear-gradient(
			-45deg,
			rgba(0,0,0,0.15) 0px,
			rgba(0,0,0,0.05) 6px,
			rgba(0,0,0,0.05) 6px,
			rgba(0,0,0,0) 9px
		);
}

.card__image {
	width: 240px;
	height: 135px;
	border-radius: 0 0 4px 4px;
	object-fit: cover;
	object-position: center;
}

.card__tag-list {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap-reverse;
	
}

.card__tag {
	--tag-accent: var(--box);
	padding: 2px 4px;
	background: var(--tag-accent);
	border-radius: 4px;
	margin: 4px 0 0 4px;
	font-size: 12px;
}