.card-link{
    text-decoration:none;
    color:inherit;
}

/* Card Container */
.flip-card{
    width:360px;
    height:520px;
    perspective:1200px;
    margin:auto;
}

/* Inner wrapper */
.flip-inner{
    width:100%;
    height:100%;
    position:relative;
    transition:transform 1.6s ease;
    transform-style:preserve-3d;
}

/* Flip on hover */
.flip-card:hover .flip-inner{
    transform:rotateY(-180deg);
}

/* Shared face styles */
.card-front,
.card-back{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,0.35);
}

/* Front */
.card-front{
    background:#e6e6e6;
    padding:20px 30px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    transform:rotateY(0deg);
}

/* Back */
.card-back{
    background:#cbbd42;
    padding:25px;

    transform:rotateY(180deg);

    position:relative;
    overflow:hidden;
}

/* Small image card */
.mini-card{
    width:120px;
    height:150px;
    background:#ffffff;

    position:absolute;
    top:25px;
    left:25px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
}

.mini-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Running text area (BACK) */
.back-running{
    position:absolute;
    top:50%;
    left:0;
    width:100%;

    transform:translateY(-50%);

    white-space:nowrap;
}

/* BIG TEXT */
.back-marquee{
    display:inline-block;

    font-size:80px;
    font-weight:700;
    letter-spacing:4px;

    color:#ffffff;

    text-shadow:0 4px 10px rgba(0,0,0,0.35);

    animation:backmove 10s linear infinite;
}

/* Animation */
@keyframes backmove{
    0%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(-100%);
    }
}

/* Running text (front) */
.running-title{
    overflow:hidden;
    white-space:nowrap;
    font-size:15px;
}

.marquee{
    display:inline-block;
    padding-left:100%;
    animation:marquee 12s linear infinite;
}

@keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-100%);}
}

/* Main content */
.card-body{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.big-letter{
    font-size:100px;
    font-weight:700;
}

/* Divider */
.divider{
    height:2px;
    background:#999;
    margin:20px 0;
}

/* Footer */
.card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.back-footer{
    position:absolute;
    bottom:25px;
    left:25px;
    right:25px;
}

/* Plus Button */
.plus{
    width:40px;
    height:40px;
    border-radius:50%;

    background:#ffffff;
    color:#000;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;
    font-weight:700;
}