Why the front face of my flipping card is not hidden?

Hi guys, I’ve been trying to make alphabet cards with flipping cards but I still have a problem.

When hove the elements of the front face are still showing.

I’m trying to do it using SASS on Visual Code Studio and compiling it to CSS.

I would appreciate if you could give me some advice. ¡Muchas gracias!

<!DOCTYPE html>
<html>
    <head>
        <style>
           html {
              font-size: 10px;
              font-family: Arial, Helvetica, sans-serif;
            }
            
            body {
              width: 50rem;
              height: 50rem;
              border: solid black 0.3rem;
            }
            
            .main {
              position: absolute;
              width: 17rem;
              height: 17rem;
              border: solid black 0rem;
              margin: 5rem;
              background-color: none;
              border-radius: 3rem;
              -webkit-box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem  lightgray;
                      box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem  lightgray;
              -webkit-transform: translate(-50%, -50%);
                      transform: translate(-50%, -50%);
            }
            
            .card {
              position: absolute;
              width: 17rem;
              height: 17rem;
              margin: 5rem;
              background-color: white;
              border-radius: 3rem;
              -webkit-box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem  lightgray;
                      box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem  lightgray;
              -webkit-transform-style: preserve-3d;
                      transform-style: preserve-3d;
              -webkit-transition: -webkit-transform 1s;
              transition: -webkit-transform 1s;
              transition: transform 1s;
              transition: transform 1s, -webkit-transform 1s;
            }
            
            .card .front {
              position: absolute;
              -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
            }
            
            .card .front h3 {
              position: relative;
              left: 0.8rem;
              top: 0.5rem;
              font-size: 4rem;
              margin: 0px;
              z-index: 1;
              color: #47D8E0;
            }
            
            .card .front .image img {
              width: 14rem;
              height: 14rem;
              position: relative;
              left: 2.5rem;
              bottom: 3rem;
            }
            
            .card .back {
              position: absolute;
              -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
              -webkit-transform: rotateY(180deg);
                      transform: rotateY(180deg);
            }
            
            .card .back h3 {
              font-size: 1rem;
            }
            
            .card .back p {
              font-size: 1rem;
            }
            
            .card .back h4 {
              font-size: 1rem;
            }
            
            .card:hover {
              -webkit-transform: rotateY(180deg);
                      transform: rotateY(180deg);
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="card">
                <div class="front">
                    <h3>A</h3>
                    <div class="image">
                        <img src="/Users/judithsanchez/Desktop/Code Academy PRO/Projects/Flashcards/Abeja.jpg">
                    </div>
                </div>
                <div class="back">
                    <h3>Abeja</h3>
                    <p>·abehhah·</p>
                    <h4>Bee</h4>
                </div>
            </div>
        </div>
    </body>

</html> ```