body {
	/*margin: 0;*/
}

#wall {
	padding-top: max(5%, 37px);
	transition: padding 200ms;
}

#wall > .grid-block {
	display: none;
}

.wall {
	display: flex;
	flex-wrap: wrap;
}

.wall-zoom {
	position: fixed;
	height: 10vh;
	width: 5vh;
	background-color: rgba(0, 0, 0, 0.65);
	bottom: 0;
	right: 0;
	transform: translate(-3vh, -3vh);
	z-index: 2;
	border-radius: 6vh;

	transition: transform 350ms;
}

.wall-zoom:hover {
	transform: translate(-3vh, -3vh) scale(1.1);
}

.wall-zoom > span {
	position: absolute;
	left: 50%;
	color: #fff;
	opacity: 0.5;
	transition: opacity 200ms;
}

.wall-zoom > span:nth-child(1) {
	top: 0;
	transform: translate(-50%, 30%);
}

.wall-zoom > span:nth-child(2) {
	bottom: 0;
	transform: translate(-50%, -30%);
}

.wall-zoom > span:hover {
	cursor: pointer;
	opacity: 1;
}

.zoom-disabled {
	cursor: auto !important;
}

.flip-box {
	--box-width: 20vw;
	--box-height: calc(var(--box-width) / (512 / 576));
	background-color: transparent;
	width: var(--box-width);
	height: var(--box-height);
	perspective: 1000px;

	transition: width 200ms, height 200ms, transform 200ms;
}

.flip-box:hover {
	cursor: pointer;
	transform: scale(1.1);
	z-index: 1;
}

.flip-box:hover .flip-box-front,
.flip-box:hover .flip-box-back {
	border-radius: 7px;
	overflow: hidden;
}

.flip-box-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.flip-box-inner-flipped {
	transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	transition: border-radius 200ms;
}

.flip-box-front > img {
	width: 100%;
	height: 100%;
}

.flip-box-back {
	background-color: #434343;
	color: white;
	transform: rotateY(180deg);

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;

	padding: 4.5%;
}

.flip-box-back > img {
	height: calc(var(--box-width) / 2.5);
	margin: auto;
	border-radius: 3%;

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

.flip-box-back > h2 {
	font-size: calc(var(--box-width) / 11);
	margin: 0;
}

.flip-box-back > p {
	font-size: calc(var(--box-width) / 15);
	margin: 0;

	font-weight: 600;
}