JSFiddle - React, Tailwind, and code Playground

HTML

<div class="channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280" src="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=280x280&amp;quality=100" srcset="//cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=560x560&amp;quality=100 2x, //cdn-images.audioaddict.com/8/6/d/e/2/b/86de2baad6357243d57e77e71494624f.jpg?size=840x840&amp;quality=100 3x" class="responsive-image-component"></div>


  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">

    <img width="280" height="280"...

CSS

.channel-browser__channels {
    border-top: 1px solid rgba(86,95,115,0.5);
    padding-top: 14px;
    margin-top: 24px;
}

.channel-browser__channel-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.channel-browser__channel-grid-item {
    position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item{
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #1a1a1a;
    background-color:red;
    -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);

}