.media-placeholder {
  width: 100%;
}

.placeholder-frame {
  display: grid;
  gap: var(--space-3);
  min-height: 18rem;
  padding: var(--space-5);
  border: var(--border-subtle);
  border-radius: var(--radius-soft);
  background:
    linear-gradient(135deg, rgba(161, 66, 26, 0.04), rgba(255, 255, 255, 0.55)),
    repeating-linear-gradient(
      -45deg,
      transparent 0 12px,
      rgba(29, 27, 24, 0.03) 12px 24px
    ),
    var(--color-surface);
  box-shadow: var(--shadow-soft);
  align-content: space-between;
}

.placeholder-copy {
  max-width: 52rem;
  color: var(--color-text);
  word-break: break-word;
}

.media-placeholder-hero .placeholder-frame {
  min-height: 26rem;
}

.media-placeholder-timeline .placeholder-frame {
  min-height: 12rem;
}

.media-placeholder-audio .placeholder-frame {
  min-height: 10rem;
}

.media-placeholder-cards .placeholder-frame {
  min-height: 16rem;
}

@media (max-width: 720px) {
  .placeholder-frame {
    padding: var(--space-4);
    min-height: 14rem;
  }

  .media-placeholder-hero .placeholder-frame {
    min-height: 18rem;
  }
}