<div class="wrapper">
  <div class="card-has">
    <picture>
      <img src="https://nus3.github.io/p-new-features/pages/container-queries/logo.png" alt="nus3 blog logo" width="280" />
    </picture>
    <div>
      <h2>nus3 blog</h2>
      <p>This is nus3 blog logo</p>
    </div>
  </div>
  <div class="card-has">
    <div>
      <h2>nus3 blog</h2>
      <p>This card is not image</p>
    </div>
  </div>
</div>

.wrapper {
  display: flex;
  gap: 20px;
}

.card-has {
  padding: 1rem;
  background-color: #A5C9CA;
  border-radius: 4px;
  overflow: hidden;
  color: #333;
}

.card-has:not(:has(> picture)) h2 {
  font-size: 4rem;
  color: #395B64;
  font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.