<div class="layout-item">
  <div class="card">
    <div class="card-thumb">
      <img src="thumb.jpg" alt="" class="card-image" />
    </div>

    <h2>Card Title</h2>
    <div class="card-content">
      <img src="https://placehold.co/150x150" alt="placeholder for image" class="card-image">

      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ad quia fugit, tempora nihil fugiat sapiente praesentium natus similique voluptates hic dolore explicabo rerum blanditiis repellendus facilis laudantium molestiae vel! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ad quia fugit, tempora nihil fugiat sapiente praesentium natus similique voluptates hic dolore explicabo rerum blanditiis repellendus facilis laudantium molestiae vel! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ad quia fugit, tempora nihil fugiat sapiente praesentium natus similique voluptates hic dolore explicabo rerum blanditiis repellendus facilis laudantium molestiae vel! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ad quia fugit, tempora nihil fugiat sapiente praesentium natus similique voluptates hic dolore explicabo rerum blanditiis repellendus facilis laudantium molestiae vel!</p>

    </div>

    <div class="card-footer">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Content #1</a></li>
        <li><a href="#">Content #2</a></li>
      </ul>
    </div>

  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

* {
  border-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.layout-item {
  container: card / inline-size;
}

.card {
  display: flex;
  flex-flow: column;
  padding-inline: 2rem;
  inline-size: 50vw;
}

.card-content {
  display: flex;
  flex-flow: row;
  gap: 2rem;
  padding-inline-end: 2rem;
  margin-block-end: 2rem;
}

.card-image {
  width: 150px;
  height: auto;
}

.card-footer {
  background: oklch(0.1 0 265);

  a {
    color: oklch(1 0 326);
  }

  ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
  }
}

@container card (width <= 800px) {
  .card {
    display: flex;
    gap: 2rem;
    outline: dotted 2px deeppink;
  }

  .card-image {
    width: 100%;
    height: auto;
    border: 1px solid red;
  }

  .card-content {
    flex-flow: column-reverse;
    inline-size: fit-content;
  }
}