:root {
	--purple-50: hsl(260, 100%, 95%);
	--purple-300: hsl(264, 82%, 80%);
	--purple-500: hsl(263, 55%, 52%);

	--white: hsl(0, 0%, 100%);
	--grey-100: hsl(214, 17%, 92%);
	--grey-200: hsl(0, 0%, 81%);
	--grey-400: hsl(224, 10%, 45%);
	--grey-500: hsl(217, 19%, 35%);
	--dark-blue: hsl(219, 29%, 14%);
	--black: hsl(0, 0%, 7%);
	--shadow-color: #19213e44;

	--font-size-small: 0.75rem;
	--font-size-regular: 0.8125rem;
	--font-size-medium: 0.95rem;
	--font-size-big: 1.25rem;
	--font-weight-sub: 400;
	--font-weight-regular: 500;
	--font-weight-emphasis: 600;

	--corner-radius: 0.5rem;
	--spacing-small: 0.5rem;
	--spacing-regular: 1rem;
	--spacing-medium: 1.5rem;
	--spacing-large: 2rem;
	--page-margins: 10.25rem;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: var(--font-size-regular);
	font-weight: var(--font-weight-regular);
	color: var(--purple-500);
	background-color: var(--grey-100);
}

/* Styling */
.card {
	box-shadow: 2rem 3rem 3rem var(--shadow-color);

	& h2, & .big-quote {
		color: var(--bright-text);
	}
}

.purple {
	color: var(--purple-50);
	--bright-text: var(--white);
	background-color: var(--purple-500);
	--avatar-border-color: var(--purple-300);
}

.black {
	color: var(--grey-200);
	background-color: var(--dark-blue);
	--avatar-border-color: var(--purple-500);

}

.grey {
	color: var(--grey-100);
	--bright-text: var(--white);
	background-color: var(--grey-500);
}

.white {
	color: var(--grey-400);
	--bright-text: var(--grey-500);
	background-color: var(--white);
}

img {
	border-radius: 50%;
	outline: 2px solid var(--avatar-border-color);
	height: 2.4lh;
}

/* Structure */

main {
	padding: var(--page-margins);
	flex: 1;
}

.card {
	border-radius: var(--corner-radius);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--spacing-regular);
	padding: var(--spacing-large);
	
	& > .heading {
		display: grid;
		align-items: center;
		grid-template-areas:
		"img hdr"
		"img sub";

		& h2 {
			grid-area: hdr;
			font-size: var(--font-size-medium);
			font-weight: var(--font-weight-regular);
		}
		& .subheading {
			grid-area: sub;
			font-size: var(--font-size-small);
			font-weight: var(--font-weight-sub);
			letter-spacing: -3%;
		}
		& img {
			grid-area: img;
			margin-right: var(--spacing-medium);
		}
	}

	& > .big-quote {
		line-height: 120%;
		font-size: var(--font-size-big);
		font-weight: var(--font-weight-emphasis);
	}

	& > p:not(.big-quote) {
		line-height: 135%;
		font-size: var(--font-size-regular);
		font-weight: var(--font-weight-regular);
		letter-spacing: 0.7%;
	}
}

.responsive-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	gap: var(--spacing-medium) var(--spacing-large);
}

@media (min-width: 830px) {
	.responsive-grid {
		grid-auto-rows: 1fr;
		grid-auto-columns: 1fr;
		grid-template-areas:
		"a a"
		"b c"
		"d d"
		"e e";
		
		& :nth-child(1) {
			grid-area: a;
		}

		& :nth-child(4) {
			grid-area: d;
		}

		& :nth-child(5) {
			grid-area: e;
		}
	}
}

@media (min-width: 1130px) {
	.responsive-grid {
		grid-auto-rows: 1fr;
		grid-auto-columns: 1fr;
		grid-template-areas:
			"a a b"
			"c d d"
			"e e .";
	}
}

@media (min-width: 1440px) {
	.responsive-grid {
		grid-template-areas:
			"a a b e"
			"c d d e";
	}
}