css-sandbox/media_object/media.css

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

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

@media only screen and (min-width: 768px) {
  .media {
    grid-template-areas: 
      "title decoration"
      "body body"
      "footer footer";
    grid-template-columns: 4fr 1fr;
  }
}

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

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

  margin-top: 0.3em;
}

@media only screen and (min-width: 768px) {
  .media__decoration {
    justify-self: inherit;
  }
}

.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);
}