.mercury-order {
  grid-template-areas:
    "image image"
    "card details";
  grid-template-columns: .9fr 1.1fr;
  align-items: stretch;
}

.mercury-order-card {
  grid-area: card;
}

.mercury-order-details {
  display: contents;
}

.mercury-order-details figure {
  grid-area: image;
}

.mercury-order-details figure img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #191714;
}

.mercury-details-list {
  grid-area: details;
  grid-template-columns: 1fr;
}

@media (max-width: 800px) {
  .mercury-order {
    grid-template-areas:
      "image"
      "card"
      "details";
    grid-template-columns: 1fr;
  }
}