اعمال نشدن :backface-visibility

سلام دوست عزیز زمانی که در ویدیو به درستی کار می کنه حتما شما توی کدهایی که نوشتید مشکل دارید و باید دقیق بررسی کنید.

سلام کد های استایل شما چند تا ایراد داشت براتون اینجا قرارش دادم امیدوارم مفید باشه

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.flip-card {
  width: 300px;
  height: 300px;
  margin: 300px;
  &:hover {
    .flip-card-inner {
      transform: rotateY(180deg);
    }
  }
  .flip-card-front {
    transform: rotateY(180deg);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
  }
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
}
.flip-card-back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background-color: rgb(156, 105, 105);
  p {
    color: red;
  }
}