/* ignore */
body {
  margin: 0;
}

#grid {
  height: 65vh;
}

#left {
  background: crimson;
  padding: .3em;
}

#right {
  background: white;
  border: 0rem solid rgb(0 0 0 / 10%);
  padding: .4em;
}

/* the magic */
#grid {
  transition: 300ms;
  display: grid;
  grid-template-columns: 48px auto;
}

#grid:has(#left:hover) {
  grid-template-columns: 15% auto;
}
/* magic + CSS variable */
#grid {
  transition: 300ms;
  display: grid;
  grid-template-columns: var(--left, 48px) auto;
}

#grid:has(#left:hover) {
  --left: 30%;
}

.media li {
  display: grid;
  grid-template-columns: 20em 1fr;
  grid-template-rows: 2em 3em;
  gap: 1em;
  margin-bottom: 1em;
}

.media li>img {
  grid-row: 1 / 3;
  width: 19em;
}