:root {
	--ff-sans: "Poppins", sans-serif;

	--fw-ligth: 200;
	--fw-normal: 400;
	--fw-bold: 600;

	--fs-400: 0.9375rem;
	--fs-500: 1.25rem;
	--fs-600: 1.625rem;
	--fs-900: 2.5rem;
	
	--clr-neutral-900: hsl(234, 12%, 34%);
	--clr-neutral-400: hsl(229, 6%, 66%);
	--clr-neutral-100: hsl(0, 0%, 98%);

	--clr-teal: hsl(180, 58%, 56%);
	--clr-red: hsl(0, 70%, 60%);
	--clr-blue: hsl(212, 75%, 62%);
	--clr-yellow: hsl(34, 89%, 65%);
}

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

html {
	font-family: var(--ff-sans);
	font-weight: var(--fw-normal);
	line-height: 1.7;
	color: var(--clr-neutral-400);
}

body {
	margin: 0;
}

h1,
h2,
h3 {
	color: var(--clr-neutral-900);
	line-height: 1.2;
}

.wrapper {
	padding-inline: 2rem;
	max-width: 80rem;
	margin-inline: auto;
	margin-bottom: 6rem;
}
.wrapper--narrow {
	max-width: 34.375rem;
}

header {
	text-align: center;
	margin-block: 6rem;
}

h1 {
	font-weight: var(--fw-ligth);
	font-size: var(--fs-900);
}
h1 span {
	font-weight: var(--fw-bold);
}

header > p{
	font-size: var(--fs-500);
}

.layout-grid {
	display: flex;
	gap: 2rem;
}
.layout-grid > * {
	flex: 1;
}
.col {
	display: grid;
	align-content: center;
	gap: 2rem;
}
.card {
	padding: 2rem;
	border-top: 0.325rem solid;
	border-radius: 0.325rem;
	box-shadow: 0 1rem 1.5rem -0.5rem rgb(0 50 1000 / 0.15);
}
.card__title {
	font-size: var(--fs-600);
	margin: 0;
}
.card__img {
	display: block;
	margin-left: auto;
	margin-top: 1rem;
}

.border-teal {
	border-color: var(--clr-teal);
}
.border-red {
	border-color: var(--clr-red);
}
.border-yellow {
	border-color: var(--clr-yellow);
}
.border-blue {
	border-color: var(--clr-blue);
}

@media (max-width: 830px) {
	.layout-grid {
		flex-direction: column;
	}
	h1 {
		font-size: var(--fs-600);
	}
	p{
		font-size: var(--fs-400);
	}
	.card__title {
		font-size: var(--fs-500);
	}
}