contentdb/app/scss/gallery.scss

.gallery-thumbnails {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	overflow: auto hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;

	li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;

		&:hover img, .active img {
			filter: brightness(1.1);
		}
	}

	img {
		width: 200px;
		height: 133px;
		object-fit: cover;
	}
}

.video-embed {
	min-width: 200px;
	min-height: 133px;
	background: #111;
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;

	.fa-play {
		display: block;
		font-size: 200%;
		color: #f44;
	}

	&:hover {
		background: #191919;

		.fa-play {
			color: red;
		}
	}

	.label {
		position: absolute;
		top: 0.25rem;
		right: 0.5rem;
		color: #555;
		font-size: 80%;
	}
}

.screenshot-add {
	display: block !important;
	width: 200px;
	height: 133px;
	background: #444;
	color: #666;
	text-align: center;
	line-height: 133px !important;
	font-size: 80px;

	&:hover {
		background: #555;
		color: #999;
		text-decoration: none;
	}
}