<li class="card">
  <h2 class="card__title">
    <a href="#">Some Awesome Article</a>
  </h2>
  <p class="card__blurb">Here's a description for this awesome article.</p>
  <small class="card__author">Chrome DevRel</small>
  <img class="card__media" alt="" width="400" height="400" src="https://assets.codepen.io/605876/team-awesome.png" />
</li>

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family:  'Google Sans', sans-serif, system-ui;
}

.card {
  --color: var(--indigo-3-hsl);
  border-radius: var(--radius-2);
  background: var(--gray-0);
  padding: var(--size-fluid-2);
  box-shadow: var(--shadow-4);
  color: var(--gray-9);
  list-style-type: none;
  display: grid;
  grid-gap: var(--size-fluid-1);
  overflow: hidden;
  border-left: var(--size-2) solid hsl(var(--color));
}

.card:has(.card__media) {
  --color: var(--yellow-3-hsl);
  padding: 0 0 0 var(--size-fluid-2);
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: repeat(3, auto);
}

.card:has(.card__media) .card__title {
  padding-top: var(--size-fluid-2);
}

.card > *:has(+ .card__media) {
  padding-bottom:  var(--size-fluid-2);
}

.card ::selection {
  background-color:  hsl(var(--color) / 25%);
}

.card__title {
  line-height: 1;
  margin-bottom: var(--size-fluid-1);
}

.card a {
  color: var(--gray-9);
  padding: 0;
  margin: 0;
  text-decoration-color: hsl(var(--color) / 100%);
}

.card__media {
  grid-column: 2;
  grid-row: 1 / -1;
  background: hsl(var(--color) / 50%);
  object-fit: cover;
  height: 100%;
}