Stuck on @include backface-visibility doesn't work

[je22]

https://www.codecademy.com/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/mixins?action=resume

here is my code which seems ok but nothing happen in the css windows and in the control one. the only thing is that the text is written in an other way when i pass on it.
can someone tell me what i’ve done wrong.
Thanks

```

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
background: repeating-linear-gradient(
$direction,
$stripe-background,
$stripe-background ($width-percent - 1),
$stripe-color 1%,
$stripe-background $width-percent
);
}

@mixin transform($transformation) {
transform: $transformation;
-webkit-transform: $transformation;
-moz-transform: $transformation;
-ms-transform: $transformation;
-o-transform: $transformation;
}

@mixin photo-content {
object-fit: cover;
}

@mixin backface-visibility($visibility: hidden) {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
}

.notecard {&:hover{
@include transform (rotatey(-180deg));
}
width: 300px;
height: 180px;
border: 1px solid black;
display: inline-block;
margin: 20px;
font-family: Roboto, sans-serif;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);

.front, .back {
width: 100%;
height: 100%;
position: absolute;
@include backface-visibility;
}

.front {
z-index: 3;
font-size: 20px;}

.word {
  display: block;
  text-align: center;
  position: relative;
  top: 40%;
}    

}

.back {
z-index: 1;
word-wrap: break-word;
line-height: 1.6;
.definition {
width: 100%;
height: 100%;

  .photo {
    width: 60%;
    margin: 0px auto;
      
  }
}

}
}

<do not remove the three backticks above>

[je22]

i’ve solved it . i just got to assign the backface-visibility to the .front in the main scss