:root {
	--dark-blue: hsl(198, 96%, 18%);
	--medium-blue: hsl(201, 70%, 21%);
	--light-blue: hsl(201, 32%, 36%);
	--blue: hsl(224, 64%, 33%);
	--wine: hsl(358, 58%, 33%);
	--blood: hsl(357, 37%, 52%);
	--orange: hsl(27, 76%, 60%);
	--gray: hsl(213, 27%, 84%);
	--white: hsl(0, 0%, 100%);
	--text-black: hsl(0, 0%, 0%);
	--text-dark: hsl(222, 47%, 11%);

	--green: #059669;
	--red: #ef4444;

	--text--darker-gray: hsl(215, 25%, 27%);
	--text--dark-gray: hsl(215, 19%, 35%);
	--text-medium-gray: hsl(0, 0%, 45%);
	--text--light-gray: hsl(215, 16%, 47%);
	--text--lighter-gray: hsl(215, 20%, 65%);
	--text-hover-blue: hsl(224, 65%, 26%);
	--text-dark-blue: hsl(226, 71%, 40%);
	--text-blue: hsl(224, 76%, 48%);

	--card-border-dark: hsl(214, 32%, 91%);
	--card-border-light: hsl(210, 40%, 96%);
	--card-bg-white: hsl(0, 0%, 100%);
	--card-bg-gray: hsl(210, 40%, 98%);
	--card-bg-blue: hsl(214, 100%, 97%);
	--card-shadow: hsla(0, 0%, 0%, 0.05);
	--card-bg-trans: hsla(0, 0%, 100%, 0.1);
}

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

body {
	font-family: 'Open Sans', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: 'wdth' 100;

	/* apenas para testes retirar em produção */
	padding-top: 5rem;
}

.container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1rem;
}

@media only screen and (min-width: 75em) {
	.container {
		padding: 0 1.5rem;
	}
}

/* LIGHT CARDS */

.bps__card {
	box-shadow: 0 1px 2px 0 var(--card-shadow);
	border: 1px solid var(--card-border-dark);
	border-radius: 1em;
	background: var(--card-bg-white);
	padding: 1em;
}

.bps__indicator {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	box-shadow: 0 1px 2px 0 var(--card-shadow);
	border: 1px solid var(--light-blue);
	border-radius: 1em;
	color: var(--light-blue);
	background: var(--card-bg-white);
	padding: 1em;
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

.bps__indicator:hover {
	box-shadow: 0px 8px 5px -4px rgba(0, 0, 0, 0.1);
	background: var(--card-bg-blue);
}

.bps__indicator h3 {
	text-align: center;
	text-transform: uppercase;
	font-size: 0.75em;
	font-weight: 700;
	color: var(--light-blue);
}

.bps__indicator__info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.bps__indicator__info i {
	font-size: 1.75em;
}

.bps__indicator__info p {
	font-size: 1.75em;
	font-weight: 600;
}

.bps__indicator__footer {
	padding-top: 1em;
	border-top: 1px solid hsla(200, 32%, 36%, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bps__indicator__footer span {
	font-size: 0.7em;
	color: var(--light-blue);
	font-weight: 700;
}

/* BLUE CARDS */

.bps__card--blue {
	box-shadow: 0 1px 2px 0 var(--card-shadow);
	border: 1px solid var(--card-border-dark);
	border-radius: 1em;
	background: var(--light-blue);
	color: var(--white);
	padding: 1em;
}

.bps__indicator--blue {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	box-shadow: 0 1px 2px 0 var(--card-shadow);
	border: 1px solid var(--light-blue);
	border-radius: 1em;
	color: var(--white);
	background: var(--light-blue);
	padding: 1em;
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

.bps__indicator--blue:hover {
	box-shadow: 0px 8px 5px -4px rgba(0, 0, 0, 0.1);
	background: var(--dark-blue);
}

.bps__indicator--blue h3 {
	text-align: center;
	text-transform: uppercase;
	font-size: 0.75em;
	font-weight: 700;
}

.bps__indicator__info--blue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.bps__indicator__info--blue i {
	font-size: 1.75em;
}

.bps__indicator__info--blue p {
	font-size: 1.75em;
	font-weight: 600;
}

.bps__indicator__footer--blue {
	padding-top: 1em;
	border-top: 1px solid hsla(216, 100%, 97%, 0.15);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bps__indicator__footer--blue span {
	font-size: 0.7em;
	font-weight: 700;
}

@media (min-width: 480px) {
	.bps__card {
		padding: 2em;
	}

	.bps__card--blue {
		padding: 2em;
	}
}