.lc-external-media {
  overflow: hidden;
  margin: 18px 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #09090b;
}
.lc-external-media-stage {
  display: grid;
  min-height: 190px;
  place-items: center;
  background: #050505;
}
.lc-external-media-audio .lc-external-media-stage { min-height: 92px; padding: 18px; }
.lc-external-media-object { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #050505; color-scheme: dark; }
.lc-external-media-gallery .lc-external-media-stage { display: block; }
.lc-external-media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  background: rgba(255,255,255,.12);
}
.lc-external-media-gallery-item { display: flex; min-width: 0; margin: 0; flex-direction: column; background: #050505; }
.lc-external-media-gallery-item:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.lc-external-media-gallery-item .lc-external-media-object { flex: 1; min-height: 220px; max-height: 520px; }
.lc-external-media-gallery-item figcaption {
  padding: 9px 11px;
  color: #d4d4d8;
  background: #0b0b0d;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .03em;
}
.lc-external-media-video .lc-external-media-object { aspect-ratio: 16 / 9; }
.lc-external-media-audio .lc-external-media-object { max-height: none; }
.lc-external-media-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #a1a1aa;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .03em;
}
.lc-external-media-meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lc-external-media-error { margin: 0; padding: 18px; color: #d4d4d8; text-align: center; }
.lc-external-media-error a { color: #fff; text-decoration: underline; }
.lc-external-media-compact { margin: 14px 0; }
.lc-external-media-compact .lc-external-media-stage { min-height: 132px; }
.lc-external-media-compact.lc-external-media-video .lc-external-media-stage { min-height: 0; }
.lc-external-media-compact.lc-external-media-audio .lc-external-media-stage { min-height: 76px; }
.lc-external-media-compact .lc-external-media-meta { align-items: flex-start; flex-direction: column; }
@media (max-width: 560px) {
  .lc-external-media-meta { align-items: flex-start; flex-direction: column; }
  .lc-external-media-gallery-grid { grid-template-columns: 1fr; }
  .lc-external-media-gallery-item:first-child:nth-last-child(3) { grid-column: auto; }
  .lc-external-media-gallery-item .lc-external-media-object { min-height: 0; }
}

html.light .lc-external-media {
  border-color: #d7dce4;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}
html.light .lc-external-media-audio .lc-external-media-stage {
  background: #f7f5f1;
}
html.light .lc-external-media-audio .lc-external-media-object {
  background: #f7f5f1;
  color-scheme: light;
}
html.light .lc-external-media-gallery-grid {
  background: #d7dce4;
}
html.light .lc-external-media-gallery-item figcaption {
  color: #334155;
  background: #f7f5f1;
}
html.light .lc-external-media-meta {
  color: #64748b;
  background: #fff;
}
html.light .lc-external-media-meta a,
html.light .lc-external-media-error a {
  color: #c92f28;
}
html.light .lc-external-media-error {
  color: #334155;
  background: #fff;
}