HTML CSS

<div class="card">
  <img src="/assets/img/screenshots/Uvpmf92p.jpeg" width="1200" height="1200" alt="The outline of a bar of chocolate with a row of vertical wafers." eleventy:ignore="">
  <h2 class="truncate">Chocolate wafer CSS background</h2>
  <p class="description truncate-mutliple-lines-ellipsis">
    This is background image that mimicks chocolate-covered wafers. It can be used
    in a repeating pattern. Extra text to make this description more than 3 lines.
    Anything beyond that is truncated.
  </p>
</div>

.truncate-mutliple-lines-ellipsis {
    --num-of-lines: 3;

    display: -webkit-box;
    -webkit-line-clamp: var(--num-of-lines);
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* general styles */
  * {
    box-sizing: border-box;
  }

  body {
    --background-color: hsl(0, 0%, 6%);
    --card-background-color: hsl(0, 0%, 10%);
    --text-color: hsl(0, 0%, 90%);

    min-height: 100dvh;
    margin: 0;
    padding-inline: 0.5rem;

    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;

    background-color: var(--background-color);
    color: var(--text-color);

    display: grid;
    place-items: center;
  }

  /* card styles */
  .card {
    width: 100%;
    max-width: 400px;

    padding: 1rem;
    gap: 1rem;

    display: grid;
    grid-template-rows: auto min-content;

    background-color: var(--card-background-color);

    border-radius: 0.25rem;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.4),
      0 0 4px rgba(255, 255, 255, 0.2);

    img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;

      border-radius: 0.25rem 0.25rem 0 0;
    }

    h2 {
      margin: 0;
      font-size: 1.2rem;
    }
  }