<div class="carousel">
  <a href="#">
    <img src="https://picsum.photos/300/100" alt="">
    <h3>Heading</h3>
    <span>Lorem ipsum dolor sit amet consectetur</span>
  </a>
  <a href="#">
    <img src="https://picsum.photos/300/100" alt="">
    <h3>Heading</h3>
    <span>Lorem ipsum dolor sit amet consectetur</span>
  </a>
  <a href="#">
    <img src="https://picsum.photos/300/100" alt="">
    <h3>Heading</h3>
    <span>Lorem ipsum dolor sit amet consectetur</span>
  </a>
  <a href="#">
    <img src="https://picsum.photos/300/100" alt="">
    <h3>Heading</h3>
    <span>Lorem ipsum dolor sit amet consectetur</span>
  </a>
</div>
.carousel {
  display: flex;
  gap: 20px; 
  overflow-x: scroll;
}

a {
  min-inline-size: 220px;
}

img {
  max-inline-size: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.