*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	color: #111;
	background: linear-gradient(to right, #b6b6b6 0%, #cecece 50%, #dbdbdb 100%);
	line-height: 1.35;
}


:root {
	--accent: #222; /* primary text / stroke */
	--muted: #6b7280; /* secondary text */
	--card-bg: #ebebeb; /* card background */
	--border: #e5e7eb; /* light border */
	--maxw: 1100px; /* max page width */
}

.page {
	min-height: 100svh;
	display: flex;
	align-items: center; 
	justify-content: center; 
	padding: 32px 20px;
}

.wrapper {
	width: 100%;
	max-width: var(--maxw);
	display: grid;
	grid-template-rows: auto 1fr auto;
	row-gap: 28px;
}

header {
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
}

.logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	
}

.tagline {
	color: var(--accent);
}

.cards-outer {
	display: grid;
	align-items: center;
	justify-items: center;
}

.cards {
	display: grid;
	grid-template-columns: repeat(1, minmax(260px, 1fr));
	gap: clamp(16px, 3vw, 36px);
	width: min(100%, 900px);
	margin-inline: auto;
	place-items: center;
}

.card {
	background: var(--card-bg);

	box-shadow: -48px 24px 24px rgba(0, 0, 0, 0.09);
	padding: clamp(18px, 3.2vw, 28px);
	width: 100%;
	max-width: 480px;
	min-height: 270px;
	display: grid;
	align-content: center;
	gap: 10px;

	text-align: center;
}

.card:first-child {
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-items: center;
	gap: 20px;
}

.card:first-child img {
	height: 36px;
	margin-top: 32px;
	width: auto;
	align-self: center;
	justify-self: center;
}

.card:first-child .tagline {
	align-self: end;
	justify-self: center;
	margin-bottom: 0;
}

.card .name {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.card a {
	color: inherit;
	text-decoration: none;
}
.card a:hover {
	border-bottom-color: #888;
}

footer {
	text-align: center;
	color: #444;
	padding-top: 6px;
}