@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100;200;300;400;500;600;700;800&display=swap");

:root {
	--clr-primary-200: hsl(260, 100%, 95%);
	--clr-primary-400: hsl(264, 82%, 80%);
	--clr-primary-700: hsl(263, 55%, 52%);

	--clr-neutral-100: hsl(0, 0%, 100%);
	--clr-neutral-200: hsl(214, 17%, 92%);
	--clr-neutral-300: hsl(0, 0%, 81%);
	--clr-neutral-400: hsl(224, 10%, 45%);
	--clr-neutral-600: hsl(217, 19%, 35%);
	--clr-neutral-700: hsl(219, 29%, 14%);
	--clr-neutral-800: hsl(0, 0%, 7%);

	--fs-base: 0.8125rem;

	--ff-base: "Barlow Semi Condensed", sans-serif;

	--fw-base: 500;
	--fw-strong: 600;
}

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

	* {
		margin: 0;
		padding: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	body {
		/* 4. Add accessible line-height */
		line-height: 1.5;
		/* 5. Improve text rendering */
		-webkit-font-smoothing: antialiased;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
	}
}

body {
	font-family: var(--ff-base);
	font-size: var(--fs-base);
	font-weight: var(--fw-base);
	line-height: 1.5;
	padding: 5rem 2rem;
	background: linear-gradient(90deg, white, var(--clr-neutral-300));
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.grid-container {
	display: grid;
	gap: 2rem;
	max-width: 1440px;
}

.card:nth-of-type(1) {
	background: var(--clr-primary-700);
}

.grid-container .card {
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	box-shadow: 0 10px 48px 6px rgba(0, 0, 0, 0.2);
}

.grid-container .card .profile {
	display: flex;
	gap: 1rem;
}

.profile img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.card:nth-of-type(1) .profile img {
	border: 2px solid var(--clr-primary-400);
}

.card:nth-of-type(1) p {
	color: var(--clr-neutral-300);
}

.profile-name {
	font-size: 0.9rem;
	font-weight: var(--fw-strong);
}

.card:nth-of-type(1) .profile .profile-data .profile-name {
	color: var(--clr-neutral-200);
}

h3 {
	font-size: 1.3rem;
	font-weight: var(--fw-strong);
}

.card:nth-of-type(1) h3 {
	color: var(--clr-neutral-200);
}

.card:nth-of-type(2) {
	background-color: var(--clr-neutral-600);
}

.card:nth-of-type(2) .profile .profile-name {
	color: var(--clr-neutral-200);
}

.card:nth-of-type(2) p {
	color: var(--clr-neutral-300);
}

.card:nth-of-type(2) h3 {
	color: var(--clr-neutral-200);
	font-size: 1.2rem;
}

.card:nth-of-type(3) {
	background-color: white;
}

.card:nth-of-type(3) .profile-name {
	color: var(--clr-neutral-600);
}

.card:nth-of-type(3) h3 {
	color: var(--clr-neutral-600);
	font-weight: var(--fw-strong);
}

.card:nth-of-type(3) p {
	color: var(--clr-neutral-400);
}

.card:nth-of-type(4) {
	background-color: var(--clr-neutral-700);
}

.card:nth-of-type(4) .profile-name {
	color: var(--clr-neutral-200);
}

.card:nth-of-type(4) h3 {
	color: var(--clr-neutral-300);
	font-weight: var(--fw-strong);
}

.card:nth-of-type(4) p {
	color: var(--clr-neutral-300);
}

.card:nth-of-type(5) {
	background-color: var(--clr-neutral-100);
}

.card:nth-of-type(5) .profile-name {
	color: var(--clr-neutral-600);
}

.card:nth-of-type(5) h3 {
	color: var(--clr-neutral-600);
	font-weight: var(--fw-strong);
}

.card:nth-of-type(5) p {
	color: var(--clr-neutral-400);
}

@media (width > 1024px) {
	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto;
	}

	.card:nth-of-type(1) {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.card:nth-of-type(2) {
		grid-column: 3;
		grid-row: 1;
	}
	.card:nth-of-type(3) {
		grid-column: 1;
		grid-row: 2;
	}
	.card:nth-of-type(4) {
		grid-column: 2 / 4;
		grid-row: 2;
	}

	.card:nth-of-type(5) {
		grid-column: 4;
		grid-row: 1 / 3;
	}
	.card:nth-of-type(1) {
		background: url(images/bg-pattern-quotation.svg) var(--clr-primary-700)
			no-repeat;
		background-position: 80% top;
	}
}