<div class="wrapper">
  <div class="card">
    <div class="card-thumbnail"></div>
    <div class="card-content">
      <h2 class="card-title">Pexelsの画像です</h2>
      <p>フリー写真素材を探すのにPexelsはおすすめです。</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">画像なしです。</h2>
      <p>HTMLを見るとわかりますが、画像の有無でクラスの変化はありません</p>
    </div>
  </div></div>

.wrapper {
  max-width: 700px;
  margin: 2rem auto;
}

.card {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.card:has(.card-thumbnail) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: #eee;
}

.card:not(:has(.card-thumbnail)) {
  background: #e8f6eb;
  border-top: solid 2px #a0cf01;
  border-radius: 0 0 8px 8px;
}

.card-thumbnail {
  aspect-ratio: 4/3;
  width: 200px;
  background: url('https://images.pexels.com/photos/2775196/pexels-photo-2775196.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') center center;
  background-size: 240px;
  opacity: 0.5;
}