zola-ludwig/sass/main.scss

html {
	height: 100vh;
	text-rendering:optimizeLegibility;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
	font-size: 16pt;
	color: rgb(255, 255, 255);
}

a {
	color: rgb(255, 255, 255);
	text-decoration: none;
    font-weight: bold;
}

a:hover {
	color: rgb(242,132,14);
}

body {
	margin: 0;
	background-color: rgb(80, 80, 80);
}

main.home {
	min-height: 100vh;
	display: flex;
}

main.article {
	width: 66vw;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14pt;
}

header {
	width: 66vw;
	margin-left: auto;
	margin-right: auto;
}

header h1 {
	font-size: 2.5em;
	padding-top: 1em;
	margin: 0;
}

footer {
	display: flex;
	justify-content: center;
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 0;
	flex-grow: 1;
	justify-content: center;
}

.left{
	align-items: flex-end;
	padding-right: 2vw;
}

.right{
	align-items: flex-start;
	padding-left: 2vw;
}

.instant  {
	background-color: rgb(255, 255, 255);
	color: rgb(10, 10, 10);
	padding: 2vw;
	text-align: center;
}

div.instant > img {
	max-width: 25vw;
}

.instant h1 {
	font-weight: 700;
	margin: 1vw 0 0 0;
}

.links a {
	font-size: xx-large;
}

.meta {
	padding-left: 0.75em;
	color: rgb(200, 200, 200);
	font-size: 0.9em;
}

figure.instant {
	margin-left: auto;
	margin-right: auto;
	padding: 2vw 0;
}

figure > picture > img {
	display: block;
	margin: 0 2vw;
	max-width: calc(100% - 4vw);
	width: calc(100% - 4vw);
	height: auto;
}

figure > figcaption > p {
	margin: 1vw 2vw 0;
}

.gallery {
	@extend .instant;
	padding: 1.5vw;
	--row-height: 23vh;
	// margin: -0.25rem;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	justify-content: center;
	align-items: flex-end;
}

@media only screen and (max-height: 1044px) {
.gallery {
	--row-height: 240px;
}
}

.gallery > .box {
	--ratio: calc(var(--w) / var(--h));
	flex-grow: calc(var(--ratio) * 100);
	flex-shrink: calc(var(--ratio) * 100);
	flex-basis: calc(var(--ratio) * var(--row-height));
	/*min-width: var(--min-width);*/
	min-height: calc(0.7 * var(--row-height));
	margin: 0.5vw;
}

// .container-gallery .gallery .box {
// 	margin: 0.5rem;
// }

.gallery > .box > figure {
	display: block;
	padding: 0;
	margin: 0px;
	width: 100%;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

.gallery img {
	margin: 0;
	min-width: 100%;
	min-height: 100%;
}

// .gallery + .box {
// 	margin-top: calc(0.5rem);
// }
//
// .gallery + .gallery {
// 	margin-top: calc(0.25rem);
// }
//
// .box + .gallery {
// 	margin-top: calc(0.25rem - 10px);
// }