.h-100{
	height: 100%;
}
.w-100{
	width: 100%;
}
.h-100v{
	min-height: 100vh;
}
.justify-content-center{
	justify-content: center;
}
.align-items-center{
	align-items: center;
}
.m-auto{
	margin: auto;
}
.d-block{
	display:block;
}
.d-flex{
	display: flex;
}
.flex-column{
	flex-direction: column;
}
.hero-about-section{
	.title{
		left: 45%;
		top: 45%;
		position:absolute;
		max-width: 600px;
	}
}
.fixed-height{
	.grid-row{
		height: var(--fixed-height, 100vh)!important;
		padding: var(--fixed-height-padding);
	}
}
.gallery-grid{
	*{
		box-sizing: border-box;
	}
	.gallery-text{
		h2,h3,h4,h5,h6{
			font-weight: bold;
			font-size: 2rem;
		}
		padding: 1.8rem 0;
		display:flex;
		flex-direction: column; 
		gap: 1rem;
	}
	.left{
		margin-right: auto;
	}
	.center{
		margin: 0 auto;
	}
	.right{
		margin-left: auto;
		margin-right: var(--grid-gap);
	}
	.gallery{
		--grid-gap: 10px;
		display:grid;
		grid-template-columns: repeat(4, calc(25% - var(--grid-gap)));
		grid-template-rows: 1fr;
		gap: var(--grid-gap);
		.grid-item{
			position:relative;
			height: 100%;
			width: 100%;
			&:hover{
				background-image: var(--hover-image, var(--hover-image-0, var(--bg-image)));
			}
			&::after{
				content: '';
				transition: background 0.3s ease-in-out;
			}
			&.has-hover{
				cursor: pointer;
				&:hover{
					&::after{
						content: attr(title);
						inset: 0;
						background: linear-gradient(to bottom, transparent 50%, #16093e);
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: end;
						padding: 1.5rem;
						font-size: 1.5rem;
						line-height: 1.1em;
						font-weight: bold;
						color: white;
						pointer-events: none;
					}
				}
			}
			&:nth-of-type(8n+1),
			&:nth-of-type(8n+6){
				grid-column: auto / span 1;
				grid-row: auto / span 2;
				aspect-ratio: 1 / 2;
			}
			&:nth-of-type(8n+2),
			&:nth-of-type(8n+4),
			&:nth-of-type(8n+5),
			&:nth-of-type(8n+8){
				grid-column: auto / span 1;
				grid-row: auto / span 1;
				aspect-ratio: 1 / 1;
			}
			&:nth-of-type(8n+3),
			&:nth-of-type(8n+7){
				grid-column: auto / span 2;
				grid-row: auto / span 1;
				aspect-ratio: 2 / 1;
			}
		}
	}
}
.opacity-0{
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.opacity-1{
	opacity: 1;
	transition: opacity 0.3s ease-in-out;	
}
.object-fit-cover{
	object-fit: cover;
}
.object-position-center{
	object-position: center;
}
.position-absolute{
	position: absolute;
}
.landing-page-section{
	min-height:100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
@media screen and (max-width: 767px){
	.hero-about-section{
		.title{
			left: var(--grid-margin);
			width: 100%;
			
		}
	}
	.gallery-grid{
		.gallery{
			grid-template-columns: 50% 50%;
			.grid-item{
				background-image: var(--hover-image, var(--bg-image));
				&:nth-of-type(8n+1),
				&:nth-of-type(8n+7){
					grid-column: auto / span 1;
					grid-row: auto / span 2;
					aspect-ratio: 1 / 2;
				}
				&:nth-of-type(8n+2),
				&:nth-of-type(8n+3),
				&:nth-of-type(8n+6),
				&:nth-of-type(8n+8){
					grid-column: auto / span 1;
					grid-row: auto / span 1;
					aspect-ratio: 1 / 1;
				}
				&:nth-of-type(8n+4),
				&:nth-of-type(8n+5){
					grid-column: auto / span 2;
					grid-row: auto / span 1;
					aspect-ratio: 2 / 1;
				}
/* 				&:has-hover{ */
					&::after{
						content: attr(title);
						inset: 0;
						background: linear-gradient(to bottom, transparent 50%, #16093e);
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: end;
						padding: 1rem!important;
						font-size: 1rem!important;
						line-height: 1.1em!important;
						font-weight: bold;
						color: white;
						pointer-events: none;
					}
/* 				} */
			}
		}
	}	
}