photos/web/shared/css/base.css

@import url('https://fonts.googleapis.com/css2?family=Faustina:wght@400;550&display=swap');

/*
 * Units
 */

:root {
	--spacing: 0.375rem;
}

/*
 * Typography
 */

html {
	font-family: 'Faustina', serif;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0rem;

	font-size: 1em; /* 16pt */
	line-height: 1.272;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 550;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: greyscale;
}

h1 {
	font-size: 2.0581em;
}

h2 {
	font-size: 1.618em;
}

h3 {
	font-size: 1.272em;
}

h4, h5, h6 {
	font-size: 1.272em;
}

.dim {
	opacity: 0.333;
}

/*
 * Molecules
 */

.preloaded-thumbnail {
	display: block;
	position: relative;
}
.preloaded-thumbnail picture:not(.preloaded-thumbnail-image) {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	display: block !important;
}
.preloaded-thumbnail-image img {
	object-fit: cover;
}

/*
 * Organisms
 */

nav ul {
	padding: var(--spacing);
	margin: 0;

	list-style: none;
	display: flex;
	justify-content: flex-end;
}

nav ul li {
	margin: var(--spacing);

	display: block;

	font-size: 0.9em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

header {
	padding: 1rem calc(var(--spacing) * 2);
}