/* =======
   GALLERY
   ======= */	

.m__gallery {
	background: var(--color__midnight); }   

.gallery__container {
	position: relative;
	width: 100%;
	padding-bottom: 40%;
	overflow: hidden; }

.gallery__container a { }
		
.gallery__container .gallery__image,
.gallery__container .gallery__more {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 25%;
	height: 50%;
	z-index: 2; }	

.gallery__container .gallery__image:nth-of-type(1) {
	width: 50%;
	height: 100%; }
	
.gallery__container .gallery__image:nth-of-type(2) {
	top: 0;
	left: 50%; }
	
.gallery__container .gallery__image:nth-of-type(3) {
	top: 0;
	left: 75%; }

.gallery__container .gallery__image:nth-of-type(4) {
	top: 50%;
	left: 50%; }


/* Open Gallery */
.gallery__container .gallery__more {
	display: flex;
	align-items: center;
  justify-content: center;
	left: 75%;
	top: 50%;
	color: var(--color__white); }

.gallery__container .gallery__more span.icon:after {
	content: '';
	position: relative;
	margin: 1rem auto 0;
	display: block;
	width: 3.4rem;
	height: 3.4rem;
	z-index: 1;
	background: url('../svg/icon__gallery.svg') no-repeat;
	background-size: contain; }
		






@media all and (max-width: 800px) {

	.gallery__container {
		padding-bottom: 200%; }
		
	.gallery__container .gallery__image,
	.gallery__container .gallery__more {
		width: 50%;
		height: 25%; }	
	
	.gallery__container .gallery__image:nth-of-type(1) {
		width: 100%;
		height: 50%; }
		
	.gallery__container .gallery__image:nth-of-type(2) {
		top: 50%;
		left: 0; }
		
	.gallery__container .gallery__image:nth-of-type(3) {
		top: 50%;
		left: 50%; }
	
	.gallery__container .gallery__image:nth-of-type(4) {
		top: 75%;
		left: 0; }
	
	.gallery__container .gallery__more {
		top: 75%;
		left: 50%; }
		
	.gallery__container a.gallery__more span.icon:after {	
		width: 2rem;
		height: 2rem; }
}