php-gallery/css/scss/_body.scss

/*
 |-------------------------------------------------------------
 | INDEX
 |-------------------------------------------------------------
*/
.info-text {
	@include defaultFont();

	margin: 1rem 0 1rem 0.5rem; padding: 0;

	text-align: center;

	h1 {
		font-family: $font-header;

		margin-top: 0;
		margin-bottom: 1rem;
	}
	p {
		font-family: $font-body;

		margin-top: 0;
		margin-bottom: 1rem;
	}
}

.gallery-root {
	margin-bottom: 1rem; padding: 0.25rem;
  
	background-color: $bg; color: $fg;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  
	border: 0.2rem solid $green;
  
	border-radius: $rad;
	box-shadow: $shadow;
}

.gallery-item {
	margin: 0.25rem; padding: 0;
  
	height: auto; max-width: calc(33.33% - 0.5rem);
  
	background-color: $bg;
	border-radius: $rad;
  
	position: relative;
  
	flex: 1 0 150px;
  
	transition: transform 0.15s cubic-bezier(.19,1,.22,1);

	&:hover {
		transform: scale(1.1) rotate(5deg);
		box-shadow: $shadow;
	  
		z-index: 999;
	}

	&:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
}

.gallery-image {
	margin: 0; padding: 0;
  
	width: 100%; height: 100%;
  
	top: 0; bottom: 0; left: 0; right: 0;
  
	position: absolute;
  
	object-fit: cover;
	object-position: center;
  
	border-radius: $rad;
}

/*
 |-------------------------------------------------------------
 | IMAGE
 |-------------------------------------------------------------
*/
.image-container {
	margin: 1rem 0 2rem 0; padding: 0;

	width: 100%;
	max-height: 69vh; height: auto;

	display: flex;
  
	background-color: $bg-alt;
	backdrop-filter: blur(8px);
  
	border-radius: $rad;
  
	transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
}

@media (max-width: 600px) {
	.image-container {
		max-height: 42vh;
	}
}

.image {
	margin: 0 auto;

	max-width: 100%; width: auto;
	max-height: inherit; height: auto;

	border-radius: $rad;
}

/*
 |-------------------------------------------------------------
 | DESCRIPTION
 |-------------------------------------------------------------
*/
.image-description {
	@include defaultDecoration($green);
	@include defaultFont();
}


/*
 |-------------------------------------------------------------
 | DETAILS
 |-------------------------------------------------------------
*/
.image-detail {
	@include defaultDecoration($green);
	@include defaultFont();
}

/*
 |-------------------------------------------------------------
 | TAGS
 |-------------------------------------------------------------
*/
.tags-root {
	@include defaultDecoration($green);
	@include defaultFont();
}
.tags {
	@include flexLeft(auto);
}
.tag {
	margin: 0.25rem; padding: 0.5rem;

	display: block;

	background-color: $page-accent;

	border-radius: $rad;

	font-family: $font-body;
}

/*
 |-------------------------------------------------------------
 | DANGER ZONE
 |-------------------------------------------------------------
*/
.danger-zone {
	@include defaultDecoration($red);
	@include defaultFont();
}