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