contentdb/app/scss/gallery.scss

.gallery {
	list-style: none;
	padding: 0;
	margin: 0 0 2em;
	overflow: auto hidden;

	li, li a {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		display: inline-block;
		vertical-align: middle;
		margin: 5px;
		padding: 0;

		a {
			display: block;
			text-decoration: none;

			&:hover {
				text-decoration: none;
			}
		}
	}

	.gallery-image {
		position: relative;

		&:hover 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;

	img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		object-fit: cover;
		z-index: 10;
	}

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

	&:hover {
		background: #191919;

		.fa-play {
			color: red;
		}
	}

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

.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;
	}
}