How do I make my image placeholders show up using CSS grid? - css

Question

I'm currently trying to figure out why my blank image placeholders aren't showing up when I use CSS grid. No matter what selectors I use and how I use them, I can't seem to figure out how to make it appear.
I've tried messing around with the class selectors and styles to make it appear, but I've been getting no luck in getting it to pop up. This is my current code right now revolving around the image placeholders:
.story {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 1.618rem;
}
.story:nth-child(even) {
flex-direction: row-reverse;
}
.story .image {
aspect-ratio: 1;
background-color: #dadada;
flex: 0 0 calc(50% - 1.618rem);
}
.story .description {
flex: 1 0 50%;
}
#media screen and (min-width: 576px){
.story .image {
flex-basis: 30%;
}
}
#media screen and (min-width: 992px){
.story,
.story:nth-child(even) {
flex-flow: column wrap;
}
.story .image {
aspect-ratio: 16/9;
flex: 0 0 100%;
width: 100%;
background-color: blue;
}
}
And my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-12">
<h2>Articles</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="story">
<div class="image">Image</div>
<div class="description">
<h2>Story Name</h2>
<p>Lorem ipsum...</p>
Link
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="story">
<div class="image">Image</div>
<div class="description">
<h2>Story Name</h2>
<p>Lorem ipsum...</p>
Link
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="story">
<div class="image">Image</div>
<div class="description">
<h2>Story Name</h2>
<p>Lorem ipsum...</p>
Link
</div>
</div>
</div>
</div>
</div>
Please help me understand what I am doing wrong! T_T