@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap');

/* Reset some default styles */
body, h1, h2, h3, p, ul, li {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, .heading {
	font-family: 'Outfit', sans-serif;
	font-weight: 500; /* Medium */
	font-size: 40px;
}

.label {
	font-family: 'Outfit', sans-serif;
	font-weight: 600; /* Semibold */
	font-size: 20px;
}

.body-text {
	font-family: 'Outfit', sans-serif;
	font-weight: 400; /* Regular */
	font-size: 16px;
}

/* Add some styles for body*/
body {
	min-height: 100vh;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.meet-team-section {
	max-width: 1135px;
	width: 100%;
	height: auto;
	
	border-radius: 25px;
	overflow: hidden;
	margin-top: 70px;
	background-color: #F3F4F6
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr;

	background: url('../images/Background_decor.svg') no-repeat;
}

.meet-team-title {
	padding-top: 30px;
	padding-left: 30px;
	grid-column: span 2;
}

.see-all-members {
	max-height: 285px; 
	width: 100%;

	display: flex; 
	flex-direction: row; 
	padding-left: 30px;
	padding-bottom: 30px;
	align-items: flex-end;
	color: #394150;

	grid-row: 2;
}

.arrow-up {
	width: 16px;
	height: 16px;
}

.image-container {
	max-height: 285px;
	max-width: 284px;
	position: relative;
}

.person-image {
	max-width: 284px;
	max-height: 285px;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.image-container::before {
	content: "";
	background: url('../images/Gradient.svg') no-repeat bottom;
	background-size: contain;
	width: 101%;
	height: 100%;
	position: absolute;
}

.info-container {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: white;
	z-index: 2;
}


.person-1 {
	background-color: #C1B6F8 !important;
}

.person-2 {
	background-color: #EDACD2 !important;
}

.person-3 {
	background-color: #9DC4F8 !important;
}

.person-4 {
	background-color: #F8D8B0 !important;
}

.person-5 {
	background-color: #86E7D4 !important;
}


img {
	width: 284px;
	height: 285px;
}

@media screen and (max-width: 1024px) {
	.meet-team-section {
		max-height: 855px;
		max-width: 850px;
		width: 100%;
	}

	.grid-container {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}

	.meet-team-title {
		grid-column: span 3;
	}
	
	.see-all-members {
		grid-row: 3;
	}
}

@media screen and (max-width: 640px) {
	.meet-team-section {
		max-height: 100%;
		max-width: 600px;
		width: 100%;
		margin: 5px;
	}

	.grid-container {
		grid-template-columns: 100%;
		grid-template-rows: 10% repeat(6, auto);
	}

	.meet-team-title {
		height: 450px;		
		grid-column: span 1;
	}
	
	.see-all-members {
		min-height: 200px;
		grid-row: 7;
		font-weight:600;
		font-size: 20px;
	}

	.arrow-up {
		width: 20px;
		height: 20px;
	}

	.image-container {
		max-height: 100%;
		max-width: 100%;
	}

	.person-image {
		max-width: 100%;
		max-height: 100%;
		width: 100%;
		height: 100%;
	}

	.info-container {
		position: absolute;
		bottom: 35px;
		left: 25px;
		color: white;
		z-index: 2;
	}
}