.story-cover-render-host { min-width: 0; }
.story-cover-empty {
  min-height: 76px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px dashed #d3c7b0;
  border-radius: 6px;
  color: #5f594f;
  text-align: center;
}
.story-cover-view {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 5px 14px rgba(35, 74, 115, 0.16);
}
.story-cover-view-compact { box-shadow: 0 2px 7px rgba(35, 74, 115, 0.12); }
.story-cover-snapshot-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.story-cover-loading,
.story-cover-unavailable { padding: 8px; color: #5f594f; font-size: 11px; line-height: 1.25; text-align: center; }

.story-cover-card-main { min-width: 0; flex: 1 1 auto; }
.story-cover-card-main.has-story-cover { display: grid; grid-template-columns: minmax(82px, 39%) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.story-cover-card-cover { min-width: 0; align-self: center; }
.story-cover-card-copy { min-width: 0; display: flex; flex-direction: column; }
.story-cover-card-copy .homepage-story-affordance { margin-top: auto; }

@media (max-width: 600px) {
  .story-cover-card-main.has-story-cover { grid-template-columns: clamp(72px, 23vw, 86px) minmax(0, 1fr); gap: 13px; align-items: center; }
}