.container {
	margin-left: auto;
	margin-right: auto;
	width: 80vw;
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.hidden {
	display: none;
}

.grid {
	margin-top: 2em;
    display: grid;
	row-gap: .5em;

	grid-template-areas: 
	"img-1 img-1 img-1 img-1 img-1 img-1"
    "img-2 img-2 img-2 img-2 img-3 img-3"
    "img-4 img-4 img-4 img-4 img-5 img-6"
    "img-7 img-7 img-8 img-8 img-5 img-6"
    "img-7 img-7 img-8 img-8 img-5 img-6"
    "img-10 img-10 img-11 img-11 img-9 img-9"
    "img-12 img-12 img-13 img-13 img-14 img-14";
}

img {
	max-height: 30em;
	max-width: 90%;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;

}

@media (max-width: 600px) {
	.grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1em;
	}

	img {
		max-height: 60vh;
	}
}

.big-preview {
    z-index: 10;
    
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    display: flex;
    
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

	transition: opacity ease-in-out .25s;
	opacity: 1;



}

.big-preview {
	pointer-events: visible;
}

.big-preview img {
	pointer-events: none;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.big-preview .close {
    position: fixed;
	right: .5em;
	top: 0em;
}

.big-preview .left, .big-preview .right {
	position: absolute;
    display: flex;

    justify-content: space-around;
    align-items: center;
    
    height: 100%;
    flex-grow: 2;
}

.big-preview .image {
    display: flex;

    justify-content: space-around;
    align-items: center;


    height: 100%;
    max-width: 100%;
    flex-grow: 1;
}

.big-preview img {
    height: 100%;
    width: 100%;

}

.big-preview .image-description {
    width: 15em;
}