.shared-banner {
  width: min(100%, var(--banner-width, 100%));
  max-width: min(100%, var(--banner-width, 100%));
  aspect-ratio: var(--banner-ratio, auto);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  overflow: hidden;
}

.shared-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--banner-fit, cover);
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  background: #06130f;
}

.shared-banner-copy {
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: center;
}

.shared-banner-copy strong {
  color: var(--accent, #ffd84d);
  font-size: 18px;
}

.shared-banner-copy small {
  color: var(--muted, #b8c4bd);
  font-size: 13px;
}

.shared-banner-placeholder {
  border-style: dashed;
}