.card{
    width: 15vw;
    height:30vh;
    background-color:pink;
    background-image:url("https://cdn.shopify.com/s/files/1/2090/3151/products/IMG_0271.jpg?v=1652708939");
    background-repeat:no-repeat;
    background-size: cover;
    transition: all 0.5s;

}

.card:hover{
    background-image:url("https://cdn.shopify.com/s/files/1/2090/3151/products/IMG_0272.jpg?v=1652691497")
}

.product_card{
    width:20vw;
    height:280px;
    background-color:rgba(9, 9, 9, 0.559);
    background-image:url('https://api.time.com/wp-content/uploads/2014/09/185260828.jpg');
    background-blend-mode: multiply;
    background-size : cover;
    object-fit: cover;
    overflow: hidden;
    transition: transform  500ms ease;
    
}


.card_content{
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient(hsl(0 0% 0% / 0),hsl(20 0% 0% / 0.3) 20%, hsl(0 0% 0% / 0));
    font-family: sans-serif;
    line-height: 1.6;
    transform: translateY(64%);
    transition: transform 500ms ease;
    color: white;
}

.card_content > *:not(.card_title) {
    opacity: 0; 
    transition:  opacity 500ms linear;
 }

.product_card:hover .card_content,
.product_card:focus-within .card_content{
    transform: translateY(0%);
    transition-delay: 500ms;

}
.product_card:focus-within .card_content{
    transition-delay: 0ms;
}

.product_card:hover .card_content > *:not(.card_title) {
    opacity: 1;
    transition-delay: 1000ms;

}

.card_title{
    position: relative;
    /* outline: 1px solid red; */
    margin-bottom: 0;
}

.card_title::after{
    content:"";
    position: absolute;
    left: calc(var(--padding) * -1);
    bottom: -2px;
    height: 3px;
    width:calc(100% + var(--padding));
    background-color: hsl(142, 90%, 61%); 
    transform: scaleX(0); 
    transform-origin: left;
    transition: transform 500ms ease;  
}
.product_card:hover .card_title::after{
    transform: scaleX(1);
}

.card_body{
    margin-bottom: 15px;
    margin-top: 15px;
    color: rgb(255 255 255 / 0.85);
}
.card_button{
    cursor: pointer;
    display: inline;
    text-decoration: none;
    color:hsl(207, 19% , 9%);
    background-color:hsl(142, 90%, 61%) ;
    padding: 0.5em 1.25em;
    transition: all 0.5s ease-out;
    border-radius: 5px;
    margin-left: 60px;
    
}

.card_button:hover,
.card_button:focus{
    background-color: aquamarine;
}

.hidden{
    display: none !important;
}