css-sandbox/media_object/media.css

.media {
  display: grid;
  grid-template-areas: 
    "title decoration"
    "body body"
    "footer footer";
  grid-template-columns: 4fr 1fr;
  background-color: var(--media-background);
  border: solid 1px var(--media-background-border);

  border-radius: 5px;
  padding: 0.5em;
}

.media__title {
  grid-area: title;
  margin-top: 0.3em;
}

.media__decoration {
  grid-area: decoration;
  display: flex;
  flex-direction: column;
  list-style: none;

  margin-top: 0.3em;
}

.media__body {
  grid-area: body;
  display: flex;
}

.media__text {
  margin: 0 0.5em;
}

.media__footer {
  grid-area: footer;
  margin-bottom: 0.3em;

  font-size: 90%;
  font-style: italic
}
.media__footer--right {
  text-align: right;
}

.media:hover {
  background-color: var(--media-background-highlight);
}

.media--embedded {
  background-color: var(--media-background-embedded);
}