section.preview {
	margin-top: 2rem;
	margin-bottom: 1rem;
	position: relative;
	display: grid;
}

section.preview * {
	box-sizing: border-box;
}

.gallery {
	width: 100%;
	display: grid;
	justify-content: center;
}

div>.caption {
	font-size: small; 
	text-align: center;
	color: #1A090D;
	padding: 0;
}

.number {
	font-size: small;
	padding: 8px 12px;
	position: absolute;
	top: 0;
	right: 0;
}

.number:hover {
	background-color: #1A090D;
	color: white;
	border-radius: 3px;
}

.slide img {
	max-width: 100%;
}

.slide:not(.active) {
	display: none;
}

.thumbnails::after {
	content: "";
	display: grid;
	clear: both;
}

div>.thumbnail {
	cursor: pointer;
	float: left;
	width: 20%;
}

.thumbnail:not(.active) {
	opacity: 0.4;
}

.thumbnail.active,
.thumbnail:not(.active):hover {
	opacity: 1;
}