<div class="container">
  <div class="global-widget">
    <div class="box">
      <img src="https://picsum.photos/200/300" alt="Placeholder Image 1">
      <p>Your Text Here</p>
    </div>
    <div class="box">
      <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image 2">
      <p>Your Text Here</p>
    </div>
    <div class="box">
      <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image 3">
      <p>Your Text Here</p>
    </div>
  </div>
</div>
.container {
  width: 500px;
}

.global-widget {
  display: flex;
  justify-content: space-around;
  margin: 20px;
  container-type: inline-size;
  container-name: global-widget;
}
.box {
  text-align: center;
  margin: 10px;
}
.box img {
  width: 100%;
  max-width: 300px; 
  margin-bottom: 10px;
}

@container global-widget (width < 400px) {
  .box img {
    display: none
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.