body
{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    height:100vh;
    display:grid;
    place-items: center;
    background: #ffbfe7;
}

.container
{
    display:grid;
    place-items: center;
}

.card
{
    width: 256px;
    height: 384px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor:pointer;
    perspective: 900px;
}

.card-inner
{
    width:100%;
    height:100%;
    position: relative;
    transform-style: preserve-3d;
    transition: 0.5s;
}

.card.flipped .card-inner
{
    transform: rotateY(180deg);
}

.face
{
    position:absolute;
    inset:0;
    display: grid;
    place-items: center;
    text-align: center;
    border: 16px;
    backface-visibility: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: white;
}

.front
{
    background: #cd4ea0;
}

.back
{
    background: #9e2786;
    transform: rotateY(180deg);
}

h2{ margin:0; font-size: 128px;}
p{ margin:10px 0 0; opacity: 0.9;}


.gift-img{
    width: 90%;
    height: auto;
    animation: heartbeat 1.5s infinite;
    transform-origin: center;
}
@keyframes heartbeat {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.1); }
    40%  { transform: scale(1); }
    60%  { transform: scale(1.1); }
    80%  { transform: scale(1); }
    100% { transform: scale(1); }
}