.gru-content div.gallerycell {
	border: 0;
	padding: 32px 20px 20px 20px;
}

div.gallerycell {
	div.main-image {
		display: flex;
		justify-content: center;
		a {
			position: relative;
			display: inline-block;
			img {
				border: none;
			}
		}
		a.desktop-only {
			margin-right: 20px;
		}
	}

	div.gallery-overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.7);
		text-transform: uppercase;
		text-decoration: underline;
		color: black;
		font-weight: bold;
		font-size: 1.125rem;
		padding-top: 150px;
	}
}

div#gallery-carrousel {
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: none;
	height: 90vh !important;

	span {
		position: absolute;
		color: white;
		cursor: pointer;
		display: block;
		height: 6rem;
		line-height: 6rem;
		width: 6rem;
		@media screen and (max-width: $desktop-limit) {
			height: 3rem;
			line-height: 3rem;
			width: 3rem;
		}
		text-align: center;
		&::after {
			font-family: FontAwesome;
			font-size: 1.5rem;
		}
		&.exit {
			top: 2%;
			right: 2%;
			&::after {
				content: "\f00d";  // times
			}
			@media screen and (max-width: $desktop-limit) {
				top: 0;
				right: 0;
			}
		}
		&.previous {
			top: 48%;
			left: 2%;
			&::after {
				content: "\f053";  // chevron-left;
			}
			@media screen and (max-width: $desktop-limit) {
				left: 0;
			}
		}
		&.next {
			top: 48%;
			right: 2%;
			&::after {
				content: "\f054";  // chevron-right;
			}
			@media screen and (max-width: $desktop-limit) {
				right: 0;
			}
		}
		&.counter {
			bottom: 0;
			right: 2%;
			@media screen and (max-width: $desktop-limit) {
				right: 0;
			}
		}
	}

	&.single {
		.previous, .next, .counter {
			visibility: hidden;
		}
	}
}
