How to fix card css grid - html

Question

I try adding removing max width for the grid will be used but it's not satisfying to see when the whole card get the width of the site
This is the home page when not searching
Then this is the image when two cards appear in the search
.card-grid, .food-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
align-items: flex-start;
padding-top: 1rem;
}
.card {
--padding: 1rem;
background: #e8eef1;
border: 1px solid #777;
border-radius: .25rem;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.card.card-shadow {
border: none;
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .79);
max-width: 700px;
}
.card-header {
font-size: 1.5rem;
padding: var(--padding);
padding-bottom: 0;
margin-bottom: .5rem;
}
.card-header.card-image {
padding: 0;
overflow: hidden;
}
.card-header.card-image > img {
display: block;
width: 100%;
max-height: 200px;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
transition: 200ms transform ease-in-out;
}
.card:hover > .card-header.card-image > img {
transform: scale(1.025);
}
.card-body {
font-size: .9rem;
text-align: center;
padding: 0 var(--padding);
}
.card-footer {
margin-top: 1rem;
padding: var(--padding);
padding-top: 0;
text-align: center;
}
<div class="card-grid" >
<div class="food-list" id="food-list">
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Sisig.webp">
</div>
<div class="card-body" >
<h3> Sisig </h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Adobo.webp">
</div>
<div class="card-body" >
<h3> Adobo </h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Porkchop.webp">
</div>
<div class="card-body" >
<h3>Porkchop with Gravy</h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Omelette.webp">
</div>
<div class="card-body" >
<h3>Omelette</h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Sinigang.webp">
</div>
<div class="card-body" >
<h3> Sinigang </h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Lumpia.webp">
</div>
<div class="card-body" >
<h3> Lumpia</h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
</div>
</div>
i already try flex but the responsive of the site didn't go well it become vertical cards of options