/* About hero */

.about-hero {
	position: relative;

	display: flex;
	align-items: flex-end;

	min-height: 72svh;

	overflow: hidden;

	background: #12100d;
	color: var(--color-text);
}

.about-hero__background {
	position: absolute;
	inset: 0;

	background:
		radial-gradient(
			circle at 78% 30%,
			rgba(156, 51, 45, 0.18),
			transparent 34%
		),
		linear-gradient(
			120deg,
			rgba(178, 137, 80, 0.06),
			transparent 45%
		);
}

.about-hero__background::after {
	position: absolute;
	right: -2vw;
	bottom: -10vw;

	color: rgba(236, 232, 223, 0.025);

	content: "PUNTIGAMES";

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: clamp(100px, 17vw, 300px);
	font-weight: 400;

	letter-spacing: -0.06em;
	line-height: 1;

	white-space: nowrap;
}

.about-hero__inner {
	position: relative;
	z-index: 2;

	padding-top:
		calc(var(--header-height) + 100px);

	padding-bottom:
		clamp(80px, 9vw, 140px);
}

.about-hero h1 {
	max-width: 1000px;

	margin:
		14px
		0
		0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(58px, 7.5vw, 112px);

	font-weight: 400;

	letter-spacing: -0.055em;
	line-height: 0.94;
}

.about-hero__lead {
	max-width: 660px;

	margin:
		clamp(32px, 4vw, 52px)
		0
		0;

	color: var(--color-text-muted);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(18px, 1.5vw, 23px);

	line-height: 1.65;
}


/* About introduction */

.about-intro {
	padding:
		clamp(110px, 11vw, 180px)
		0;

	background: var(--color-background-light);
	color: var(--color-text-dark);
}

.about-intro__heading {
	display: grid;

	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(300px, 0.75fr);

	align-items: end;

	gap:
		clamp(50px, 8vw, 130px);

	margin-bottom:
		clamp(80px, 9vw, 130px);
}

.about-intro__heading .section-kicker {
	grid-column: 1 / -1;

	margin-bottom: -22px;
}

.about-intro__heading h2 {
	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(50px, 6vw, 88px);

	font-weight: 400;

	letter-spacing: -0.045em;
	line-height: 0.98;
}

.about-intro__lead {
	max-width: 470px;

	margin:
		0
		0
		7px;

	color: rgba(36, 33, 28, 0.70);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(17px, 1.35vw, 21px);

	line-height: 1.65;
}


/* Principles */

.about-principles {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:
		clamp(30px, 4vw, 65px);
}

.about-principle {
	position: relative;

	padding-top: 24px;

	border-top:
		1px solid rgba(36, 33, 28, 0.24);
}

.about-principle__number {
	display: block;

	margin-bottom: 34px;

	color: rgba(36, 33, 28, 0.40);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 22px;
}

.about-principle h3 {
	margin:
		0
		0
		17px;

	color: var(--color-accent);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.17em;

	text-transform: uppercase;
}

.about-principle p {
	max-width: 390px;

	margin: 0;

	color: rgba(36, 33, 28, 0.70);

	font-size: 15px;
	line-height: 1.75;
}


/* Games */

.about-games {
	padding:
		clamp(110px, 11vw, 180px)
		0;

	background: #171511;
	color: var(--color-text);
}

.about-games__header {
	margin-bottom:
		clamp(60px, 7vw, 100px);
}

.about-games__header h2 {
	margin:
		12px
		0
		0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(50px, 6vw, 88px);

	font-weight: 400;

	letter-spacing: -0.045em;
	line-height: 0.98;
}

.about-games__list {
	border-top:
		1px solid var(--color-border);
}

.about-game {
	display: grid;

	grid-template-columns:
		200px
		minmax(320px, 1fr)
		minmax(260px, 0.7fr);

	align-items: center;

	gap:
		clamp(30px, 5vw, 80px);

	padding:
		clamp(34px, 4vw, 58px)
		0;

	border-bottom:
		1px solid var(--color-border);

	transition:
		background 180ms ease,
		padding 180ms ease;
}

.about-game:hover {
	padding-right: 20px;
	padding-left: 20px;

	background:
		rgba(255, 255, 255, 0.025);
}

.about-game--featured {
	background:
		linear-gradient(
			90deg,
			rgba(156, 51, 45, 0.08),
			transparent 52%
		);
}

.about-game__meta {
	display: flex;
	flex-direction: column;

	gap: 6px;

	color: var(--color-text-muted);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.13em;

	text-transform: uppercase;
}

.about-game__meta span:first-child {
	color: var(--color-accent);
}

.about-game__main {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;
}

.about-game h3 {
	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(30px, 3.4vw, 52px);

	font-weight: 400;

	letter-spacing: -0.04em;
	line-height: 1;
}

.about-game__arrow {
	flex-shrink: 0;

	color: rgba(236, 232, 223, 0.48);

	font-size: 24px;

	transition:
		color 160ms ease,
		transform 160ms ease;
}

.about-game:hover .about-game__arrow {
	color: #ffffff;

	transform:
		translate(3px, -3px);
}

.about-game > p {
	max-width: 420px;

	margin: 0;

	color: var(--color-text-muted);

	font-size: 14px;
	line-height: 1.7;
}


/* Community */

.about-community {
	padding:
		clamp(100px, 10vw, 160px)
		0;

	background: #211c17;
	color: var(--color-text);
}

.about-community__inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(330px, 0.7fr);

	align-items: end;

	gap:
		clamp(60px, 9vw, 150px);
}

.about-community h2 {
	margin:
		12px
		0
		0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(48px, 6vw, 82px);

	font-weight: 400;

	letter-spacing: -0.045em;
	line-height: 0.98;
}

.about-community__content {
	max-width: 520px;
}

.about-community__content > p {
	margin:
		0
		0
		28px;

	color: var(--color-text-muted);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(17px, 1.3vw, 20px);

	line-height: 1.65;
}

.about-community__links {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;
}


/* Tablet */

@media (max-width: 1200px) {
	.about-hero {
		min-height: 650px;
	}

	.about-intro__heading,
	.about-community__inner {
		grid-template-columns: 1fr;

		gap: 28px;
	}

	.about-intro__heading .section-kicker {
		margin-bottom: -5px;
	}

	.about-intro__lead {
		max-width: 650px;
	}

	.about-principles {
		grid-template-columns: 1fr;

		gap: 50px;
	}

	.about-principle p {
		max-width: 680px;
	}

	.about-game {
		grid-template-columns:
			150px
			minmax(0, 1fr);

		gap:
			25px
			45px;
	}

	.about-game > p {
		grid-column: 2;

		max-width: 620px;
	}

	.about-community__content {
		max-width: 650px;
	}
}


/* Mobile */

@media (max-width: 600px) {
	.about-hero {
		min-height: 620px;
	}

	.about-hero__inner {
		padding-top: 150px;
		padding-bottom: 80px;
	}

	.about-hero h1 {
		font-size:
			clamp(48px, 15vw, 68px);
	}

	.about-hero__lead {
		font-size: 17px;
	}

	.about-intro,
	.about-games,
	.about-community {
		padding:
			85px
			0
			90px;
	}

	.about-intro__heading {
		margin-bottom: 60px;
	}

	.about-intro__heading h2,
	.about-games__header h2,
	.about-community h2 {
		font-size:
			clamp(42px, 13vw, 58px);
	}

	.about-principles {
		gap: 42px;
	}

	.about-principle__number {
		margin-bottom: 22px;
	}

	.about-games__header {
		margin-bottom: 50px;
	}

	.about-game {
		display: block;

		padding:
			32px
			0;
	}

	.about-game:hover {
		padding:
			32px
			0;

		background: transparent;
	}

	.about-game__meta {
		margin-bottom: 18px;
	}

	.about-game__main {
		align-items: flex-start;
	}

	.about-game h3 {
		font-size:
			clamp(31px, 10vw, 43px);
	}

	.about-game > p {
		margin-top: 19px;

		font-size: 13px;
	}

	.about-community__links {
		flex-direction: column;
	}
}