@font-face {
	font-family: 'Barlow Semi Condensed';
	src: url('./fonts/Barlow_Semi_Condensed/BarlowSemiCondensed-Medium.ttf');
	font-weight: 500;
}

@font-face {
	font-family: 'Barlow Semi Condensed';
	src: url('./fonts/Barlow_Semi_Condensed/BarlowSemiCondensed-Bold.ttf');
	font-weight: 600;
}

@font-face {
	font-family: 'Barlow Semi Condensed';
	src: url('./fonts/Barlow_Semi_Condensed/BarlowSemiCondensed-Light.ttf');
	font-weight: 400;
}

:root {
	--clr-lighter-violet: hsl(263, 72%, 67%);
	--clr-moderate-violet: hsl(263, 55%, 52%);
	--clr-very-dark-grayish-blue: hsl(217, 19%, 35%);
	--clr-very-dark-blackish-blue: hsl(219, 29%, 14%);
	--clr-white: hsl(0, 0%, 100%);

	--clr-light-gray: hsl(0, 0%, 81%);
	--clr-light-grayish-blue: hsl(210, 46%, 95%);

	--clr-shadow: rgba(25, 40, 71, 0.331);

	font-size: 13px;
}

body {
	background-color: var(--clr-light-grayish-blue);
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 500;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

main {
	margin: 1rem;
	margin-block: auto;
}

/*** Grid ***/

.grid {
	display: grid;
	gap: 1rem;

	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);

	max-width: 1000px;
}

.grid-col-span-2 {
	grid-column: span 2;
}

.grid-row-span-2 {
	grid-row: auto / span 2;
}

.grid-col-start-4-row-start-1 {
	grid-column-start: 4;
	grid-row-start: 1;
}

/*** Card ***/

.card {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	border-radius: 10px;
	padding: 1.6rem;

	box-shadow: 0px 10px 25px var(--clr-shadow);
}

.card-quote-bg {
	background-image: url('./images/bg-pattern-quotation.svg');
	background-repeat: no-repeat;
	background-position: 85% 0%;
	background-size: 10rem;
}

.card__header {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.card__header__avatar > img {
	border-radius: 100%;
	border-style: solid;
	border-width: 3px;

	max-width: 3rem;
}

/*** Card Avatar Border Colors ***/
.avatar-border-violet {
	border-color: var(--clr-lighter-violet);
}

.avatar-border-white {
	border-color: var(--clr-white);
}

.avatar-border-grey {
	border-color: var(--clr-light-gray);
}

/*** ************************ ***/

.card__header__details {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
}

.card__header__details__name,
.card__header__details__occupation {
	margin: 0;
}

.card__header__details__name {
	font-size: 1.15rem;
	font-weight: 500;
}

.card__header__details__occupation {
	font-weight: 400;
}

.card__big-quote {
	font-size: 1.6rem;
	line-height: 1.8rem;
}

.card__small-quote {
	font-weight: 400;
}

/*** Card BG Colors ***/

.bg-clr-violet {
	background-color: var(--clr-moderate-violet);
	color: var(--clr-white);
}

.bg-clr-white {
	background-color: var(--clr-white);
	color: var(--clr-very-dark-grayish-blue);
}

.bg-clr-black {
	background-color: var(--clr-very-dark-blackish-blue);
	color: var(--clr-white);
}

.bg-clr-grey {
	background-color: var(--clr-very-dark-grayish-blue);
	color: var(--clr-white);
}

/*** Footer ***/

footer {
	margin-top: 0;
}

.attribution {
	font-size: 11px;
	text-align: center;
}
.attribution a {
	color: hsl(228, 45%, 44%);
}

/*** Mobile ***/

@media screen and (max-width: 1024px) {
	.grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;

		gap: 2rem;

		max-width: 350px;

		margin-top: 6rem;
	}

	.grid-col-span-2 {
		grid-column: auto;
	}

	.grid-row-span-2 {
		grid-row: auto;
	}

	.grid-col-start-4-row-start-1 {
		grid-column-start: auto;
		grid-row-start: auto;
	}

	.card {
		padding: 2.8rem;
	}

	footer {
		margin-top: 4rem;
	}
}