Playing card design in css

Font Family

https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet"

CSS

 *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
        background-color:#36ba59;
        font-family: 'Poppins', sans-serif;
    }
    .card{
        width:300px;
        height:400px;
        background-color:#fff;
        border-radius:10px;
        padding:10px;
        position:relative; 
        box-shadow:  -10px 10px 60px rgba(0,0,0,0.2);

    }
    .card span{
        font-size:30px;
        font-weight:bold;
        color:#ff3019;
        position:absolute;
    }
   
    .card span.number4{
        bottom:10px;
        right:10px; 
        transform:rotate(180deg) 
    }
   
    svg{
        fill:#ff3019;
         
    }
    .heart1{
        position:absolute;
        top:70px;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .heart2{
        position:absolute;
        bottom:10px;
        left:50%;
        transform: translate(-50%,-50%) rotate(180deg);

    }

Html

<div class="card">
    <span class="number1">2</span>

    <span class="number4">2</span>
    <div class="heart1">
        <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
    </div>
    <div class="heart2">
        <svg xmlns="http://www.w3.org/2000/svg"  width="50" height="50" viewBox="0 0 24 24"><path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/></svg>
    </div>
</div>