<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="team-awesome.webp" />
      <div class="card__banner">
        <span>Featured</span>
        <svg viewBox="0 0 576 512" title="star">
          <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" />
        </svg>
      </div>
    </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));
	position: relative;
}

.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:has(.card__banner) {
	--color: var(--green-3-hsl);
  animation: wiggle 6s infinite;
}


@keyframes wiggle {
  0%, 75%, 80%, 100% {
    transform: rotate(0deg);
  }
  76%, 78% {
    transform: rotate(-4deg);
  }
  77%, 79% {
    transform: rotate(4deg);
  }
}

.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%;
}

.card__banner {
  position: absolute;
  top: 100%;
  left: 100%;
  z-index: 2;
  width: 50%;
  background: var(--gray-7);
  display: grid;
  place-items: center;
  padding: var(--size-2) 0;
  box-shadow: var(--shadow-2);
  transform: translate(-50%, -50%) rotate(-45deg) translate(0, -100%);
  color: var(--gray-1);
  font-size: var(--font-size-0);
  font-weight: bold;
  text-transform: uppercase;
}

.card__banner svg {
  height: var(--size-3);
  aspect-ratio: 1;
  fill: var(--yellow-3);
}