@import "root.css";

.container {
	width: min(100% - 64px, var(--max-width));
	margin: 16px auto;
}

.page-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.page-content > header,
.header {
	display: contents;
}

.header__menu {
	display: grid;
	grid-column: 1 / -1;
	justify-content: space-between;
	grid-auto-flow: column;
}

.header__menu p {
	font-size: 26px;
}

.header__side {
	display: grid;
	justify-items: center;
}

.header__profile {
	display: grid;
	justify-items: center;
	max-width: 520px;
	padding-bottom: 104px;
}

.header__photo {
	display: grid;
	justify-items: center;
	gap: 24px;
	margin: 32px 0 20px;
}

.header__photo img {
	width: 200px;
	height: 200px;
	border-radius: 12px;
}

.header__photo a {
	font-size: 32px;
	font-weight: 500;
	border-bottom: 0.5px solid var(--color-text);
}

.header h1 {
	margin-bottom: 0;
	max-width: 480px;
	font-size: 32px;
	text-align: center;
}

.page-content > main {
	grid-column: 1;
	padding-top: 0;
}

.container--not-found .page-content > main {
	grid-column: 1 / -1;
	grid-row: 1;
	padding-top: 0;
}

.apps {
	display: grid;
	width: 100%;
	max-width: var(--max-width);
}

.content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 64px;
	row-gap: 80px;
	width: 100%;
}

.app {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 280px;
}

.app__hub {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.app__title {
	display: grid;
	align-content: center;
	gap: 12px;
}

.app__icon {
	width: 200px;
	height: 200px;
}

.app__icon-title {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.app__name p {
	font-size: 32px;
	font-weight: 500;
}

.header__menu p,
.app__link p,
.app__link-soon p {
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 6px 10px;
	margin: 0;
	border-radius: 20px;
	background: #000;
	display: inline;
}

.header__menu a,
.app__link a {
	color: #fff;
}

.app__link,
.app__link-soon {
	display: flex;
}

.app__link-soon,
.app__link-soon p {
	color: #fff;
}

.app__description p {
	font-size: 24px;
	letter-spacing: -0.02em;
	max-width: 100%;
}

.app__description a {
	color: var(--color-text);
	border-bottom: 0.5px solid var(--color-text);
}

.app__os p {
	font-size: 16px;
	color: var(--color-gray);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.not-found {
	grid-column: 1 / -1;
	display: grid;
	justify-items: center;
	gap: 32px;
	padding: 80px 0 0;
	text-align: center;
}

.not-found h1 {
	margin-bottom: 0;
}

.not-found a {
	font-size: 26px;
	border-bottom: 0.5px solid rgba(32, 38, 61, 0.4);
}