HTML CSS

<ul class="repos">
  <li class="card">
    <h3><a href="https://github.com/robole/fetching">Fetching</a></h3>
    <img class="logo" src="/pages/projects/img/fetching.webp" alt="Fetching logo" eleventy:ignore="">
    <p>A collection of *fetching* unicode art for the terminal.</p>
  </li>
</ul>

/* hover styles */

  .card:hover {
    background-color: hsl(0, 0%, 16%);
  }

  .card:hover .logo {
    filter: saturate(1);
  }

  /* general styles */

  * {
    box-sizing: border-box;
  }

  body {
    height: 100dvh;
    margin: 0;

    background-color: hsl(0, 0%, 6%);
    color: hsl(0, 0%, 95%);

    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-size: 1.1rem;

    display: grid;
    place-items: center;
  }

  /* card styles */

  .repos {
    width: 98%;
    max-width: 600px;
    padding: 0;

    list-style-type: none;
  }

  .card {
    background-color: hsl(0, 0%, 10%);
    transition: background-color 300ms ease-in;

    width: 100%;
    padding: 1.5rem 0.75rem;

    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 1rem;

    border: 0.1rem solid hsl(220deg 12% 40%);
    border-radius: 0.25rem;
  }

  .card h3 {
    margin: 0;
    font-size: 1.3rem;

    grid-column: 2;
  }

  .card h3 a {
    text-decoration: none;
    color: currentColor;
  }

  .card p {
    margin: 0;

    grid-column: 2;
  }

  .card .logo {
    width: 3.5em;
    aspect-ratio: 1 / 1;

    grid-column: 1;
    grid-row: 1 / span 2;

    filter: saturate(0);
    transition: filter 300ms ease-in-out;
  }