styles.css

:root {
	--very-dark-blue: hsl(233, 47%, 7%);
	--dark-saturated-blue: hsl(244, 38%, 16%);
	--soft-violet: hsl(277, 64%, 61%);
	--white: hsl(0, 0%, 100%);
	--slightly-transparent-white-1: hsla(0, 0%, 100%, 0.75);
	--slightly-transparent-white-2: hsla(0, 0%, 100%, 0.6);
	--inter-font: 'Inter', sans-serif;
	--lexend-font: 'Lexend Deca', sans-serif;
}

body {
	font-size: 0.938rem;
	background-color: var(--very-dark-blue);
}

.card-container {
	margin: 5.5rem 1rem;
	border-radius: 0.5rem;
	background-color: var(--dark-saturated-blue);
	overflow: hidden;
}

.image-container {
	position: relative;
	background-image: url(./images/image-header-mobile.jpg);
	width: 100%;
	height: 15.5rem;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 95%;
}
.layer {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--soft-violet);
	mix-blend-mode: multiply;
	opacity: 96%;
}

.card-content {
	padding: 1rem 1.4rem;
	text-align: center;
}

h1 {
	color: var(--white);
	font-family: var(--inter-font);
	font-weight: 700;
}
.accent {
	color: var(--soft-violet);
}
.main-paragraph {
	color: var(--slightly-transparent-white-2);
	font-family: var(--inter-font);
	font-weight: 400;
	line-height: 1.5rem;
	margin-bottom: 2rem;
}

h2 {
	line-height: 0.25rem;
}

.card-stats {
	display: flex;
	flex-direction: column;
}
.stats {
	color: var(--white);
	font-family: var(--inter-font);
	font-weight: 700;
}
.stat-headings {
	color: var(--slightly-transparent-white-2);
	font-family: var(--lexend-font);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
}

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

/* The Challenge Provide a Breakpoint at 375px for mobile
I prefer 768 and below for mobile-tablet and above for desktop
I can add more precise breakpoints but this is just a practice */
@media screen and (min-width: 768px) {
	.card-container {
		display: flex;
		flex-direction: row-reverse;
		margin: 7.813rem 7.375rem;
	}

	.image-container {
		background-image: url(./images/image-header-desktop.jpg);
		width: 55%;
		height: auto;
	}

	.card-content {
		padding: 3.438rem 5.8rem 3.438rem 3.125rem;
		width: 45%;
		text-align: left;
	}

	.card-stats {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-right: 2rem;
	}
}