card animation on hover on different cards with different background images

Question

I have created a card animation on hover, but I need more than one card to have it with different backgrounds

To explain better, I used Kevin Powell's tutorial CSS Card with hover animation and mobile fallback to make an animated card.

Now I want to have more than just one. His version uses the CSS selector in the card (background-image: url()) to set the background, but since I want to have different ones in HTML, I'm trying to format the HTML in a way it will work. Simply putting the HTML img tag is breaking it and locking the image to the animated (on-hover) pop-up.

I want to put the cards in a 3-column grid but the image problem is breaking everything. Where the place kitty is, I need that to be deleted and somehow replaced by an HTML image tag with the correct CSS to make the image the same as the kitty. I just do not know how to go about doing that correctly.

GitHub: https://github.com/jackkayak/portfolio

:root {
--clr-accent: #60992d;
--clr-header: #DEDEDE;
}

.Personal-Projects {
    place-items: center;
}

 .personal-grid {
    display: grid;
    place-items: center;
    line-height: 1.6;
}

.card {
    color: var(--clr-header);
    background-image: url("https://placekitten.com/200/200");
    background-size: cover;
    padding: 10rem 0 0 ;
    max-width: 35ch;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 500ms ease;
}

.card:hover,
.card:focus-within {
    transform: scale(1.05);
}

.card-content {
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient(
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / .4) 10%,
        hsl(0 0% 0% / 1)
    );
    
}

.card-title {
    position: relative;
    width: max-content;
    
}

.card-title::after {
content: '';
position: absolute;
height: 3px;
left: calc(var(--padding) * -1);
bottom: 0;
background-color: var(--clr-accent);
width: calc(100% + var(--padding));
transform-origin: left;
transition: transform 500ms ease;
}

.card:hover .card-title::after,
.card:focus-within .card-title::after {
    transform: scaleX(1);
}
 /* lightens font text - kevin powell's trick*/
.card-body {
    color: rgb(255, 255, 255 / .85);
    padding: 5px 0;
}

@media (hover: hover) {
    .card-content{
        transform: translateY(70%);
    transition: transform 500ms ease;
    }

    .card:hover .card-content,
    .card:focus-within .card-content {
        transform: translateY(0);
        transition-delay: 500ms;
    }
    
    .card:focus-within .card-content {
        transition-duration: 0ms;
    }
    
    .card-content > *:not(.card-title) {
        opacity: 0;
        transition: opacity 500ms linear;
    }
    
    .card:hover .card-content > *:not(.card-title),
    .card:focus-within .card-content > *:not(.card-title)                                                                                                                       {
        opacity: 1;
        transition-delay: 800ms;
    }

    .card-title::after {
        transform: scaleX(0);
    }
}

.btn-project {
    cursor: pointer;
    display: inline-block;
    padding: .5em 1.1em;
    text-decoration: none;
    color: var(--clr-header);
    background-color: var(--clr-accent);
    border-radius: 6px;
}

.btn-project:hover, 
.btn-project:focus {
    background-color: var(--clr-elements);
}

<section class="Personal-Projects">
            <h2 class="personal-label">Personal Projects</h2>
            <div class="personal-grid">
                <div class="card">
                    <div class="card-content">
                    <h2 class="card-title">cool beans</h2>
                    <p class="card-body">Lorem ipsum dolor sit amet consectetur 
                        adipisicing elit. Eligendi similique </p>
                        <a href="#" class="btn-project">To the Site</a>
                </div>
                
            </div>
    
                <!------------- Still needs to be designed ----------------->
            </div>
        </section>