.reveal-menu-container {
	position: relative;
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	transition: background-image 0.5s ease-in-out;
	overflow: hidden;
}

.reveal-menu-grid {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.reveal-menu-col {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-style: solid;
	border-width: 0;
	border-right-width: 1px;
	border-color: rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
	transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
	cursor: pointer;
	position: relative;
	--title-subtitle-spacing: 20px;
}

.reveal-menu-col:last-child {
	border-right-width: 0 !important;
}

.reveal-menu-content {
	display: block;
	position: relative;
	width: 100%;
	z-index: 2;
	transition: text-align 0.3s ease;
}

.reveal-menu-title {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 0.3s ease;
}

.reveal-menu-details {
	position: absolute;
	top: calc(50% + var(--title-subtitle-spacing, 20px));
	left: 0;
	right: 0;
	display: block;
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.4s ease, transform 0.4s ease, text-align 0.3s ease;
	pointer-events: none;
}

.reveal-menu-subtitle {
	margin: 0 0 15px 0;
	transition: color 0.3s ease;
}

.reveal-menu-btn {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Hover reveal classes triggered by presence of mouse */
.reveal-menu-col:hover .reveal-menu-details {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

@media (max-width: 768px) {
	.reveal-menu-grid {
		flex-direction: column;
	}
	.reveal-menu-col {
		height: 20%;
		border-right-width: 0 !important;
		border-bottom-width: 1px;
	}
	.reveal-menu-col:last-child {
		border-bottom-width: 0 !important;
	}
}