@font-face {
	font-family: integral cf;
	src: local('Integral CF Extra Bold'), local('Integral-CF-Extra-Bold'), url(../fonts/IntegralCF-ExtraBold.woff2) format('woff2'), url(../fonts/IntegralCF-ExtraBold.woff) format('woff'), url(../fonts/IntegralCF-ExtraBold.ttf) format('truetype');
	font-weight: 800;
	font-style: normal
}

.player_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px
}

.player_card {
	position: relative;
	width: calc(100%/4 - 20px);
	aspect-ratio: 7.5/11;
}

.player_card_flipper {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .6s;
	perspective: 1000px
}

.player_card:hover .player_card_flipper {
	transform: rotateY(180deg)
}

.player_card_front,
.player_card_back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden
}

.player_card_front_img::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 18px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: bottom right
}

.player_card_back {
	transform: rotateY(180deg)
}

.player_card_front_img::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 8px solid var(--white, #FFF)
}

.player_card_front_img img {
	width: 100%;
	height: 100%;
	aspect-ratio: 7.5/11;
	object-fit: cover
}

.player_card_front .player_info {
	position: absolute;
	bottom: 30px;
	right: 30px;
	z-index: 9;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
	transform: rotate(180deg);
	opacity: 1;
	transition: opacity .3s;
	height: 80%
}

.player_card:hover .player_card_front .player_info {
	opacity: 0
}

.player_card_front .player_info p {
	font-family: integral cf, sans-serif;
	margin: 0;
	padding: 0;
	color: #000
}

.player_card_front .player_info p.player_number {
	font-size: 24px;
	line-height: 1
}

.player_card_front .player_info p.player_fname {
	font-size: 34px;
	line-height: 1;
	margin-top: 0;
	white-space: nowrap
}

.player_card_front .player_info p.player_lname {
	font-size: 55px;
	line-height: 1;
	margin-top: 0;
	white-space: nowrap
}

.player_card_front .player_team_logo {
	position: absolute;
	bottom: 25px;
	left: 35px;
	max-width: 90px;
	width: 25%
}

.player_card_back {
	border: 8.173px solid var(--white, #FFF);
	background: #000;
	box-shadow: 0 16px 36px 0 rgba(0, 0, 0, .13);
	height: 100%;
	padding: 15px
}

.player_card_back .player_team_logo {
	text-align: center
}

.player_card_back .player_team_logo img {
	max-width: 90px
}

.player_card_back .player_info {
	margin-top: 15px;
	text-align: center
}

.player_card_back .player_info p {
	font-family: integral cf, sans-serif;
	margin: 0;
	padding: 0;
	color: #ed1272
}

.player_card_back .player_info p.player_fname {
	font-size: 34px;
	line-height: 1;
	white-space: nowrap
}

.player_card_back .player_info p.player_lname {
	font-size: 59px;
	line-height: 1;
	margin-top: -10px;
	white-space: nowrap
}

.player_card_back .player_stats {
	margin-top: 25px;
	text-align: center;
	font-weight: 700
}

.player_card_back .player_stats p {
	font-size: 14px;
	line-height: 1;
	margin-top: 0;
	padding: 0;
	margin-bottom: 8px;
	color: #fff
}

.player_card_back .player_home_town {
	margin-top: 15px;
	text-align: center;
	font-weight: 700
}

.player_card_back .player_home_town p {
	font-size: 14px;
	line-height: 1;
	margin-top: 0;
	color: #fff;
	text-transform: uppercase
}

.player_card_back .player_extra {
	position: relative;
	margin-top: 35px;
	padding: 15px;
	padding-top: 10px;
	text-align: center;
	color: #fff
}

.player_card_back .player_extra::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #87c440;
	transform: rotate(-7.035deg);
	z-index: 1
}

.player_card_back .player_extra::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ed1272;
	z-index: 1
}

.player_extra_content {
	position: relative;
	z-index: 2
}

.player_card_back .player_extra .player_extra_title:not(:last-child) {
	margin-bottom: 15px
}

.player_card_back .player_extra strong {
	font-size: 20px;
	line-height: 1;
	margin-top: 0;
	color: #fff;
	text-transform: uppercase
}

.player_card_back .player_extra p {
	font-size: 14px;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
	color: #fff
}

.player_scallable_content {
	transform-origin: top
}

@media screen and (max-width: 1200px) {
	.player_card {
		width: calc(100%/3 - 20px)
	}
}

@media screen and (max-width: 900px) {
	.player_card {
		width: calc(100%/2 - 20px)
	}
}

@media screen and (max-width: 768px) {
	.player_grid {
		justify-content: center
	}

	.player_card {
		max-width: 350px;
		width: 100%
	} 
}

.team-party_animals .player_card_front_img::after {
	background-image: url(../img/team-animals-artwork.svg)
}

.team-savannah_bananas .player_card_front_img::after {
	background-image: url(../img/team-bananas-artwork.svg);
	width: calc(100% - 34px);
	background-size: contain
}

.team-party_animals .player_card_front_img::before {
	background: linear-gradient(137deg, rgba(0, 0, 0, 0.00) -1.63%, rgba(237, 18, 114, 0.70) 69.45%);
	box-shadow: 0 0 0 10px #ed1471 inset, 0 16px 36px 0 rgba(0, 0, 0, .13)
}

.team-savannah_bananas .player_card_front_img::before {
	background: none;
	box-shadow: 0 0 0 10px #fecd06 inset, 0 16px 36px 0 rgba(0, 0, 0, .13)
}

.team-savannah_bananas .player_card_front .player_info p {
	color: #fff;
	-webkit-text-stroke: #172651 2px
}

.team-savannah_bananas .player_card_back {
	background: #172651
}

.team-savannah_bananas .player_card_back .player_info p {
	color: #eda804
}

.team-savannah_bananas .player_card_back .player_extra::after {
	background-color: #eda804
}

.team-savannah_bananas .player_card_back .player_extra::before {
	background-color: #fff
}

.team-savannah_bananas .player_card_back .player_extra strong,
.team-savannah_bananas .player_card_back .player_extra p {
	color: #172651
}