/* === gallery === */

.galleryContainer {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.galleryItemContainer {
	min-height: 200px;
	max-height: 400px;
	width: calc(100% / 3);
	max-width: 400px;
	min-width: 200px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: start;
	justify-content: center;
	
	@media screen and (max-width: 850px) {
		width: calc(100%);
		margin-bottom: 20px;
	}
}

.galleryItem {
	height: calc(100% - 20px);
	width: calc(100% - 20px);

	border-radius: var(--rounding);
	overflow: hidden;

	outline-width: 1px;
	outline-style: solid;
	outline-color: var(--border-color);

	transition: .3s;

	@media screen and (max-width: 850px) {
		width: 100%;
		height: 100%;
	}

}

@media (hover: hover) {
	.galleryItemContainer:hover > .galleryItem {
		min-height: calc(100% - 20px);
		height: auto;
		z-index: 5;
		outline-width: 3px;
		outline-color: var(--highlight);

		transform: translateY(-7.5px) translateX(15px);

	}

	.galleryItemContainer:hover .galleryTextContainer {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.galleryItemContainer:hover .galleryText {
		white-space: normal;
		line-height: var(--line-height-2) !important;
		display: block;
		mask-image: none;
	}

	.galleryItemContainer:hover > .galleryItem > .galleryImageContainer {
		height: calc((100% / 3) * 2 - 55px);
	}
}

.galleryImageContainer {
	width: 100%;
	aspect-ratio: 4 / 3.2;
	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}

.galleryImage {
	object-fit: cover;
	min-width: 100%;
	min-height: 100%;	
}

.galleryTextContainer {
	width: 100%;
	aspect-ratio: 4 / .8;
	display: flex;
	flex-direction: column;

	background-color: var(--bg-transp-color-2);
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));

	justify-content: center;

	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--border-color);

}

.galleryText {
	margin-bottom: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	width: calc(100% - 40px);
	margin-left: 20px;
	mask-image: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
}

.galleryDate {
	display: none;
}