<div class="card">
  <h2 class="card__title">
    <a href="#">Some Awesome Article</a>
  </h2>
  <p class="card__blurb">This card has no image</p>
  <small class="card__author">Chrome DevRel</small>
</div>

<div class="card">
  <h2 class="card__title">
    <a href="#">Some Other Awesome Article</a>
  </h2>
  <p class="card__blurb">This card has an image. Based on that, it uses a different grid layout and different colors.</p>
  <small class="card__author">Chrome DevRel</small>
  <img class="card__media" src="https://assets.codepen.io/89905/matroshka-04.svg" alt="" title="" width="222" height="184" draggable="false">
</div>

<footer>
  <p>This demo is part of <a href="https://goo.gle/css-wrapped-2023" target="_top">#CSSWrapped2023</a></p>
</footer>

.card {
  display: grid;
  grid-template-areas:
    "title"
    "blurb"
    "author";
  text-align: center;

  background: #f4f4f4;
  --color: #eb16c4;
  border: 0.25em solid var(--color);
  padding: 1em;
  gap: 0.5em;
  width: 100%;
  border-radius: 0.5em;
}

.card__title {
  grid-area: title;
  text-wrap: balance;
}
.card__blurb {
  grid-area: blurb;
  text-wrap: balance;
}
.card__author {
  grid-area: author;
}
.card__media {
  grid-area: media;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.card:has(.card__media) {
  grid-template-areas:
    "title"
    "blurb"
    "author"
    "media";
  padding-bottom: 0;
  --color: #6300ff;
}

@media (min-width: 45em) {
  .card {
    text-align: unset;
  }
  .card:has(.card__media) {
    grid-template-areas:
      "title title"
      "blurb media"
      "author media";
    grid-template-columns: 1fr auto;
  }
  .card__blurb {
    text-wrap: pretty;
  }
  .card__media {
    margin: unset;
    align-self: end;
    justify-self: end;
  }
}

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

  * {
    margin: 0;
    padding: 0;
  }
}

@layer baselayout {
  html {
    max-width: 90ch;
    margin: auto;
    line-height: 1.75;
    font-size: 1.25em;
    font-family: "Syne", sans-serif;
    background: white;
  }

  body {
    min-height: 100dvh;
    display: grid;
    gap: 2em;
    padding: 2em;
    place-content: safe center;
  }

  h2 {
    font-family: "Anybody", sans-serif;
  }

  a {
    color: var(--color);
    text-decoration: underline;
    text-decoration-color: hsl(156deg 100% 50% / 50%);
    text-decoration-thickness: 0.2rem;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
  }

  a:hover {
    text-decoration-color: var(--color);
  }
}