.gallery ul.gallery--filter {
	display: flex;
    gap: 1rem;
    align-items: center;
	width: 100%;
	margin: 0 0 1.5rem;
}
.gallery ul.gallery--filter li.filter--item {
	list-style: none;
	padding: 0.25rem 0.5rem;
	border: 3px solid transparent;
	transition: all 0.2s ease-in-out;
	font-weight: normal;
	letter-spacing: 0;
    font-weight: 700;
    font-family: var(--font-archivo, 'Archivo');
    border-radius: 8px;
    margin: 0;
    text-align: center;
    font-size: 16px;
}
.gallery ul.gallery--filter li.filter--item.filter--item__active {
	border-color: var(--brand-red, #EB0C0C);
}
.gallery ul.gallery--filter li.filter--item:hover {
	cursor: pointer;
	border-color: var(--brand-red, #EB0C0C);
    box-shadow: 0px 1px 4px 1px rgba(16,24,40,0.4);
}
.gallery .gallery--content {
	display: flex;
    gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}
.gallery .gallery--content .gallery--item {
	opacity: 0;
	transform: scale(0);
	transition: all 0.2s ease-in-out;
	flex: 0;
	overflow: hidden;
}
.gallery .gallery--content .gallery--item.gallery--item__active {
	opacity: 1;
	transform: scale(1);
	flex: 1 1 100%;
}
.gallery .gallery--content .gallery--item .item--image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	box-shadow: 0 2px 6px -2px #bebebe;
	transition: all 0.2s ease-in-out;
    aspect-ratio: 5/3;
    object-fit: cover;
}
.gallery .gallery--content .gallery--item.gallery--item__active:hover .item--image img {
	transform: scale(1.01);
}
.gallery .gallery--content .gallery--item.gallery--item__active:hover .item--image img {
	transform: scale(1.03);
}

/* ----- Fancybox Overrides -----*/
.fancybox-container {
	z-index: 9999999 !important;
}
.fanybox-button::before {
	display: none !important;
}
.fancybox-inner .fancybox-caption__body {
    font-size: 16px;
}
.fancybox-inner .fancybox-caption__body strong {
	font-size: calc((var(--font-min__h2) * 1px) + (var(--font-max__h2) - var(--font-min__h2)) * (100vw - calc(var(--min-size) * 1px)) / (var(--max-size) - var(--min-size)));
}
.fancybox-inner .fancybox-caption__body {
    max-height: unset;
    overflow: visible;
}

@media screen and (min-width: 500px) {
	.gallery .gallery--content .gallery--item.gallery--item__active {
		flex: 0 1 calc(50% - 0.5rem);
	}
}

@media screen and (min-width: 700px) {
	.gallery
		.gallery--content[columns='4']
		.gallery--item.gallery--item__active {
		flex: 0 1 calc(33.33% - 0.667rem);
	}
}

@media screen and (min-width: 900px) {
	.gallery
		.gallery--content[columns='4']
		.gallery--item.gallery--item__active {
		flex: 0 1 calc(25% - 0.75rem);
	}
}