<ul>
      <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>
      </li>
      <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" />
      </li>
      <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" />
      </li>
      <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>
      </li>
      <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>
    </ul>

*,
*: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);
	--padding: var(--size-fluid-2);
	border-radius: var(--radius-2);
	background: var(--gray-0);
	padding: var(--padding);
	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;
	max-inline-size: 100%;
}

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

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

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

.card:has(.card__banner) {
	--color: var(--green-3-hsl);
}

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

ul {
	padding: var(--size-fluid-3);
	display: grid;
	grid-gap: var(--size-fluid-2);
	max-width: var(--size-content-3);
  grid-template-columns: repeat(2, 1fr);
}

/* @media(min-width: 768px) {
	ul {
		grid-template-columns: repeat(2, 1fr);
	}
} */

ul .card:not(:has(.card__banner)) {
	--padding: var(--size-fluid-1);
}
ul .card:not(:has(.card__banner)) .card__title {
	font-size: var(--font-size-3);
}
ul .card:not(:has(.card__banner)) :where(.card__blurb, .card__author) {
	font-size: var(--font-size-0);
}


.card:has(.card__banner) {
	grid-row: 1;
	grid-column: 1 / -1;
	max-inline-size: 100%;
	grid-template-columns: 1fr 1fr;
	border-left-width: var(--size-4);
}