@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* || GENERAL STYLES */

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

body {
	font: 1rem "Poppins", sans-serif;

	min-height: 100vh;

	display: flex;
	gap: 1.5rem;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.bold {
	font-weight: 600;
}

/* || INTO SECTION */

.intro-section {
	margin-top: 2rem;
	
	max-width: 36rem;

	display: grid;
	gap: 1rem;
	justify-items: center;

	text-align: center;
	font-weight: 400;
	color: hsl(234, 12%, 34%);

}

.intro-section h1 {
	max-width: 20rem;
	font-weight: 200;
}

.intro-section p {
	padding-inline: 0.5rem;
}

/* || CARD STYLES */

.descriptions {
	font-weight: 400;
	font-size: 0.8rem;
}

.cards {
	width: min(64rem, 100%);
	display: grid;
	justify-items: center;
	gap: 1.5rem;

	grid-template-areas: 
		"a"
		"b"
		"c"
		"d";

	padding: 0.5rem;
}

.card {
	position: relative;

	width: min(19.5rem, 100%);
	aspect-ratio: 1.2;
	padding: 1rem;
	padding-inline: 1.5rem;

	color: hsl(234, 12%, 34%);

	box-shadow: 0rem 0.7rem 1rem hsla(212, 6%, 44%, 0.2);
	border-radius: 0.5rem;
}


.card:first-child {
	grid-area: a;
	border-top: 5px solid hsl(180, 62%, 55%);
}

.card:nth-child(2) {
	grid-area: b;
	border-top: 5px solid hsl(0, 78%, 62%);
}

.card:nth-child(3) {
	grid-area: c;
	border-top: 5px solid hsl(34, 97%, 64%);
}

.card:nth-child(4) {
	grid-area: d;
	border-top: 5px solid hsl(212, 86%, 64%);
}

.card-icons {
	position: absolute;
	right: 2rem;
	bottom: 1.5rem;
}

/* || MEDIA QUERIES */

@media (min-width: 768px) {
	.cards {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			". b ."
			"a b d"
			"a c d"
			". c .";
	}

	.intro-section h1 {
		max-width: 40rem;
		font-size: 2.5rem;
	}
}