/* === 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(--pebble-yellow);

		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;
}

/* === project === */

.projectModuleContainer {
	width: 100%;
	height: auto;
	background-color: var(--bg-transp-color);
	outline-style: solid;
	outline-width: 1px;
	outline-color: var(--border-color);
	border-radius: var(--rounding);
	margin-bottom: 20px;
	overflow: hidden;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: stretch;

	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));

	transition: .3s;

	scroll-margin-top: 100px;
}

.projectImgContainer {
	max-width: 300px;
	display: flex;

	align-items: flex-start;
	justify-content: center;

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

.projectImg {
	max-width: 300px;
	object-fit: contain;
	max-width: 100%;
	height: auto;	

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

.projectTextContainer {
	flex-grow: 1;
	padding: 20px 30px 20px 30px;
	max-width: calc(100% - 360px);
	
	display: flex;
	align-items: center;

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

.projectTextContainer p {
	margin-bottom: 0;
}

.projectFooter {
	width: 100%;
	min-height: 50px;
	
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: var(--border-color);
}

.projectFooterLeft {
	text-align: left;
	float: left;
}

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

.projectFooter p {
	margin-bottom: 0;
	opacity: .3;
	padding: 10px 20px 10px 20px;
}

.projectFooter a {
	color: var(--text-color) !important;
}


.projectFooterHighlightText {
	font-weight: 500;
}