HTML/CSS Help - Code Not Working On Safari

Site URL: https://reed-seadragon-aamj.squarespace.com/

Hi there,

Added this cool flip on hover div boxes for my website but unfortunately, they do not work properly on Safari. I primarily use Chrome so would love to know if anyone knows how I can adjust the code to fix this.

Website: https://reed-seadragon-aamj.squarespace.com/
Pass: hello
Page: https://reed-seadragon-aamj.squarespace.com/team

Quote

CSS:

// TEAM //
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  position: relative;
  margin-top: 50px;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
@media screen and (max-width:767px) { .flip-box {
  position: relative;
  margin-top: 120px !important;
  margin-bottom: -130px !important;
}}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}

.flip-box-front img {
  border-radius: 10px;
}

.flip-box-back {
  background-color: #00FF75;
  color: white;
  transform: rotateY(180deg);
}

.flip-box-back h2 {
  font-family: 'Gotham Black';
  color: #09226B !important;
  font-size: 40px;
  margin-top: 0px !important;
  position: relative;
  color: #09226B;
}
@media screen and (max-width:767px) { .flip-box-back h2 {
  margin-top: 0px !important;
  }}
.flip-box-back h3 {
  margin-top: -30px !important;
  position: relative;
  font-family: 'Gotham Medium';
  font-size: 20px;
  color: #ffffff !important;
  display: block;
}
@media screen and (max-width:767px) { .flip-box-back h3 {
  margin-top: -30px !important;
  }}
.flip-box-back h4 {
  margin-top: -30px;
  font-family: 'Gotham Black';
  font-size: 16px;
  color: #09226B !important;
  display: block;
}
@media screen and (max-width:767px) { .flip-box-back h4 {
  margin-top: -30px !important;
  }}

.flip-box-back p {
  margin-top: 0px;
  font-size: 10px;
  color: #09226B !important;
  display: block;
  padding-right: 20px;
  padding-left: 20px;
  line-height: 1.1rem;
}
@media screen and (max-width:767px) { .flip-box-back p {
  margin-top: 0px !important;
  }}

Quote

HTML:

<div class="flip-box">
      <div class="flip-box-inner">
        <div class="flip-box-front">
          <img src="https://static1.squarespace.com/static/61e89aafceee0115f1c8f842/t/61f89c0f6faed02fd91c214c/1643682833873/Team_Aspire.png" style="width: 300px; height: 300px;">
        </div>
<div class="flip-box-back">
<h2>ASPIRE</h2>
<h3>LUKA ROLOVIC</h3>
<h4>DPS</h4>
<p>
Entering his 2nd season in the Overwatch League, Aspire turned a lot of heads in his debut season with the Toronto Defiant. Known best for his Tracer mechanics Aspire is looking to take the league by storm this year with his epic pulsebombs.    
</p>
  <div class="social-icons">
  <a href="https://twitter.com/Aspire_OW" target="_blank">
  <i class="fab fa-twitter fa-xs blueiconcolor" aria-hidden="true"></i>
  </a>
  <a href="https://www.twitch.tv/owaspire" target="_blank">
  <i class="fab fa-twitch fa-xs blueiconcolor" aria-hidden="true"></i>
  </a>
</div>
        </div>
      </div>
    </div>

If anyone could look at this and let me know, that would be amazing!

Thank you in advance.

It looks  fine from my end. What problem on Safari?