@font-face {
	src: url("fonts/inter-400.woff2") format("woff2");
	font-family: "Inter";
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	src: url("fonts/inter-500.woff2") format("woff2");
	font-family: "Inter";
	font-display: swap;
	font-style: normal;
	font-weight: 500;
}

/* Global */

body {
	color: #cccccc;
	background-color: #181818;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6em;
	max-width: 620px;
	padding: 130px 26px 32px 26px;
	margin: auto;
}

h1, h2 {
	color: #ffffff;
	font-weight: 500;
	font-size: 15px;
	margin: 0;
}

p {
	margin: 0;
}

a {
	color: #8f8f8f;
	text-decoration: underline 1px;
	text-decoration-color: #424242;
	transition: color .2s ease-out;
}

a:hover {
	color: #ffffff;
}

/* Custom */

.logo {
	width: 25px;
	padding: 0 0 16px 0;
}

.text {
	padding: 16px 0 60px 0;
}

.light {
	color: #cccccc;
}

.dark {
	color: #8f8f8f;
}

.stacked {
	padding: 16px 0 0 0;
}

.socials {
	padding: 32px 0 0 0;
	word-spacing: 6px;
}

.list {
	display: grid;
	grid-template-columns: 100px 1fr;
	padding: 16px 0 60px 0;
  gap: 8px 20px;
}

.gallery {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: hidden;
	margin: 26px 0 8px 0;
	border-radius: 4px;
}

.gallery > img {
	height: 300px;
}

.double {
  display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"left-image right-image"
		"left-text right-text";
  gap: 0 20px;
}

.left-image {
	grid-area: left-image;
}

.right-image {
	grid-area: right-image;
}

.left-text {
	grid-area: left-text;
}

.right-text {
	grid-area: right-text;
}

.download > a {
	float: right;
	text-decoration: none;
}

.footer > p {
	font-size: 13px;
	padding: 40px 0 0 0;
}

.footer-right {
	float: right;
}

/* Mobile */

@media screen and (max-width: 672px) {

	body {
		padding-top: 60px;
	}

	.double {
		grid-template-areas:
		"left-image left-image"
		"left-text left-text"
		"right-image right-image"
		"right-text right-text";
	}

}