:root {

}

.thumbnail {
	background-color: var(--fore);
	width: 9vmax;
	height: 9vmax;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.thumbnail:hover {
	opacity: 0.9;
	transition-duration: 0.2s;
}

.picture {
	color: var(--back);
	color: var(--back);
	background-color: var(--fore);
	width: 9vmax;
	height: 11vmax;
	margin: 0.5vmax;
	margin-bottom: 1vmax;
	margin-top: 0;
}

.gallery {
	display: flex;
	width: 100%;
	padding: 0;
	padding-top: 3vmax;
	flex-wrap: wrap;
}

.picture p, a {
	font-size: 0.5vmax;
	margin: 0;
}

.picture a {
	font-weight: 600;
	color: var(--back)
}

.picture h3 {
	font-size: 1vmax;
	font-style: normal;
	margin: 0;
}

.tier {
	height: 1.25vmax;
	width: 1.25vmax;
	float: left;
	text-align: center;
}

b {
	font-weight: 600;
}

.explanation {
	text-align: right;
	float: right;
}

.description {
	padding: 0.4vmax;
}

.sss {
	background-image: var(--ssstier);
}

.ss {
	background-image: var(--sstier);
}

.s {
	background-image: var(--stier);
}

.a {
	background-image: var(--atier);
}

.b {
	background-image: var(--btier);	
}