src/css/Player.css

.player {
	border-radius: var(--large);
	margin: var(--medium) 0;
	background-color: var(--light-grey);
	text-shadow: 0 1px 6px black;
	padding: var(--medium);
	display: grid;
	align-items: center;
	grid-template-columns: 2em 2em 2.5em 5.5em auto 2em 2.5em;
	grid-template-rows: auto;
	grid-template-areas:
		'position image player player player multiplier score'
		'position image team game-status game-score multiplier score'
		'position image stats stats stats multiplier score';
}


.player__position {
	font-family: var(--font-2);
	font-size: 1.2rem;
	grid-area: position;
	padding-left: var(--small);
}

.player__image {
	grid-area: image;
	background-color: white;
	border-radius: 2em;
	overflow: hidden;
	aspect-ratio: 1;
}

.player__img {
	transform: translateY(5px) scale(1.4);
	filter: drop-shadow(0px 0px 1px var(--lighter-grey));
}

.player--hidden .player__img {
	transform: translateY(8px) scale(1.2);
}

.player__name {
	grid-area: player;
	margin: 0 0.5em;
}

.player__team {
	grid-area: team;
	font-weight: 100;
	font-size: 0.8rem;
	margin: 0 0.7em;
}

.player__multiplier {
	font-family: var(--font-3);
	color: black;
	grid-area: multiplier;
	justify-self: end;
	font-size: 0.8rem;
	font-weight: 700;
	border-radius: 100%;
	padding: 0.4em;
	box-shadow: 0 0 1px 1px white;
	visibility: hidden;
	text-shadow: none;
}

.player__multiplier--2 {
	background-color: var(--bright-yellow);
	visibility: visible;
}

.player__multiplier--3 {
	background-color: var(--bright-blue);
	visibility: visible;
}

.player__multiplier--4 {
	background-color: var(--bright-green);
	visibility: visible;
}

.player__score {
	font-family: var(--font-3);
	font-size: 1.2rem;
	grid-area: score;
	justify-self: end;
}

.player__game-status,
.player__game-score {
	font-size: 0.8rem;
}

.player__game-status {
	grid-area: game-status;
	padding-left: var(--large);
}

.player__game-score {
	grid-area: game-score;
}

@media (min-width: 640px) {
	.player {
		max-width: 8em;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto 4em 3em 1.2em 2em;
		grid-template-areas:
			'position multiplier'
			'image image'
			'player player'
			'game-status game-score'
			'stats stats';
		align-items: end;
		box-shadow: 0 0 2px 1px white;
	}

	.player--total-week {
		grid-template-rows: auto 4em 3em 0 0;
	}

	.player__position {
		padding: 0;
	}

	.player__image {
		background: none;
	}

	.player__img {
		transform: translateY(10px) scale(1.1);
		filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.9));
	}

	.player--hidden .player__img {
		transform: translateY(16px) scale(0.9);
	}

	.player__name {
		background-color: rgba(221, 221, 221, 0.9);
		color: black;
		border-radius: 0.3rem;
		padding: var(--small);
		overflow-wrap: break-word;
		margin: 0.3em 0;
		box-shadow: 0 0 2px 1px white;
		min-height: 4em;
		z-index: 1;
		text-shadow: none;
	}

	.player__score,
	.player__team {
		grid-area: player;
		color: black;
		z-index: 1;
		text-shadow: none;
	}

	.player__score {
		font-weight: 700;
		margin: 0.1em var(--small);
	}

	.player__team {
		margin: var(--medium) var(--small);
	}

	.player__multiplier {
		transform: translate(0.3em, -0.3em);
		padding: 0.2em;
	}

	.player__game-status {
		padding-left: 0;
	}

	.player__game-score {
		text-align: right;
	}
}

.player--ARI {
	background-color: #97233f;
}

.player--ATL {
	background-color: #a71930;
}

.player--BAL {
	background-color: #241773;
}

.player--BUF {
	background-color: #00338d;
}

.player--CAR {
	background-color: #0085ca;
}

.player--CHI {
	background-color: #0b162a;
}

.player--CIN {
	background-color: #fb4f14;
}

.player--CLE {
	background-color: #ff3c00;
}

.player--DAL {
	background-color: #7f9695;
}

.player--DEN {
	background-color: #002244;
}

.player--DET {
	background-color: #0076b6;
}

.player--GB {
	background-color: #203731;
}

.player--HOU {
	background-color: #03202f;
}

.player--IND {
	background-color: #002c5f;
}

.player--JAX {
	background-color: #006778;
}

.player--KC {
	background-color: #e31837;
}

.player--LAC {
	background-color: #ffc20e;
}

.player--LAR {
	background-color: #ffd100;
}

.player--LA {
	background-color: #ffd100;
}

.player--LV {
	background-color: #a5acaf;
}

.player--MIA {
	background-color: #008e97;
}

.player--MIN {
	background-color: #4f2683;
}

.player--NE {
	background-color: #c60c30;
}

.player--NO {
	background-color: #d3bc8d;
}

.player--NYG {
	background-color: #0b2265;
}

.player--NYJ {
	background-color: #125740;
}

.player--PHI {
	background-color: #004c54;
}

.player--PIT {
	background-color: #ffb612;
}

.player--SEA {
	background-color: #69be28;
}

.player--SF {
	background-color: #aa0000;
}

.player--TB {
	background-color: #d50a0a;
}

.player--TEN {
	background-color: #4b92db;
}

.player--WAS {
	background-color: #773141;
}