Can't make card images the same size css

Question

I have images on a card and every image makes the card bigger or smaller:

I want to make every card the same size.

Here is the html for one card:

<>
      <div class="product__featured">
        <span class="product__price">${props.product.price}</span>
        <img class="product__image" src={props.product.img} />
        <h1 class="product__title">{props.product.name}</h1>
        <hr class="separate" />
        <Rating></Rating>
        <button class="product__btn btn .bg-danger">Buy Now</button>
      </div>
    </>

Here is the original css for the card:

hr {
    border: 0;
    height: 3px;
    width: 30px;
    background-color: accent;
    margin: 22px 0 20px;
}


.btn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 1.75em 3.5em;
    white-space: nowrap;
    border-radius: 5px;

}

.product {
    position: relative;
    width: 300px;
    padding: 30px;
    border-radius: 8px;
    background-color: white;

}


.product__featured {
    position: relative;
    width: 300px;
    padding: 30px;
    border-radius: 8px;
    background-color: white;
    border-width: 3px;
    border-style: solid;
    border-color: red;
    background-color: lightgrey;

}

.product__image {
    width: 180%;
    margin-left: -40%;
    margin-right: -40%;
    margin-top: -5px;
    margin-bottom: 30px;
    max-width: none;
    object-fit: cover;
    float: left;
}

.product__title {
    font-size: 30px;
    color: black;
    margin: 0 0 0.5em 0;
    line-height: 1.1;
}

.product__price {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    background-color: black;
    color: white;
    border-radius: 50%;

}

.product__category {
    display: block;
    color: accent;
    margin-bottom: 1em;
}

.product__btn {
    position: absolute;
    bottom: -30px;
    right: 10px;
    background-color: red;
    transition: background-color time easing, box-shadow time easing;
    border-radius: 12px;
    border-style: none;

}

.separate {
    border: 0;
    height: 3px;
    width: 30px;
    background-color: red;
    margin: 22px 0 20px;
    box-sizing: content-box;
}

I tried using display flex and messes everything arround the card, also using object-fit: cover and float:left and nothing changed, also object-fit:scale-down and i don't know what else to try.