body {
	padding-top: 30px;
}

.pill-badges {
	display: flex;
	justify-content: center;
	/* Centers horizontally */
	align-items: center;
	/* Centers vertically */
	height: 1vh;
	/* Takes full viewport height */
	margin-bottom: 50px;
	gap: 10px;
	/* Space between spans */
}


/* 
equivalent to above centering 
.pill-badges {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

/* Remove Hover and Active States:
To ensure the color doesn't change when hovering or clicking:
*/
a,
a:visited,
a:hover,
a:active {
	color: inherit;
	text-decoration: none;
}


.content-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.column {
	width: 600px;
	padding: 10px;

}

.featured {
	max-width: 500px;
	max-height: 600px;
	cursor: pointer;
	border: 2px solid black;

}

.thumbnail {
	object-fit: cover;
	max-width: 120px;
	max-height: 100px;
	cursor: pointer;
	opacity: 0.5;
	margin: 5px;
	border: 2px solid black;

}

.thumbnail:hover {
	opacity: 1;
}

.active {
	opacity: 1;
}

.gallery-container {
	margin-top: 30px;
	max-width: 500px;
	display: flex;
	min-height: 100px;
	align-items: center;
}

.gallery-container .img:nth-child():hover~.featured {
	object-fit: cover;
}

.img-container {
	z-index: 1;
	max-width: 500px;
	position: relative;
}