@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%/3 - 20px);
  aspect-ratio: 7.5/11;
}

.player_card_flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.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: calc(100% - 16px);
  height: calc(100% - 16px);
  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 0.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: 0px;
  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: 0px 16px 36px 0px rgba(0, 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: bold;
}

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

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

.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 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: 1024px) {
  .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 Specific */

.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) 99.45%);
  box-shadow: 0px 0px 0px 10px #ED1471 inset, 0px 16px 36px 0px rgba(0, 0, 0, 0.13);
}

.team-savannah_bananas .player_card_front_img::before {
  background: linear-gradient(137deg, rgba(0, 0, 0, 0.00) -1.63%, rgba(254, 205, 6, 0.70) 80.29%);
  box-shadow: 0px 0px 0px 10px #FECD06 inset, 0px 16px 36px 0px rgba(0, 0, 0, 0.13);
}

.team-savannah_bananas .player_card_front .player_info p {
  color: #ffffff;
  -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: #ffffff;
}

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