/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
	--cnvs-body-font: "Raleway", sans-serif;
	--cnvs-primary-font: "Raleway", sans-serif;
	--cnvs-secondary-font: "Roboto", serif;

	--cnvs-themecolor: #01689c;
	--cnvs-themecolor-rgb: 	1, 104, 156;
}


#profilepic section {
	width: 90%;
	margin: 0 auto;
	line-height: 0;
	position: relative;
}

#profilepic section img {
	width: 100%;
}

#profilepic section article {
	position: absolute;
	top: 0;
	width: 100%;
	background: white;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	mix-blend-mode: lighten;
}

#profilepic section div {
	background: black;
	height: 30vw;
}

#profilepic section div:nth-of-type(2) {
	grid-column: 2 / 4;
}

/* Add Media query for desktop */
@media (min-width: 768px) {
	#profilepic section div {
		height: 14vw;
	}

	#profilepic section article {
		max-height: 318px;
	}
}

/* Media query for between mobile and desktop */
@media (min-width: 426px) and (max-width: 767px) {
	#profilepic section div {
		height: 20vw;
	}

	#profilepic section article {
		max-height: 283px;
	}
}

/* Add Media query for mobile */
@media (max-width: 426px) {
	#profilepic section div {
		height: 30vw;
	}

	#profilepic section article {
		max-height: 213px;
	}
}

@media (max-width: 412px) {
	#profilepic section div {
		height: 30vw;
	}

	#profilepic section article {
		max-height: 205px;
	}
}