[data-moroc-ribbon] {
  position: absolute;
  inset: 0;
  overflow: visible;
}

[data-moroc-ribbon] .moroc-ribbon__poster,
[data-moroc-ribbon] .moroc-ribbon__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: max(100%, 1440px);
  max-width: none;
  height: auto;
  aspect-ratio: 3024 / 1592;
  translate: -50% -50%;
  overflow: hidden;
}

[data-moroc-ribbon] .moroc-ribbon__poster {
  visibility: visible;
}

[data-moroc-ribbon] .moroc-ribbon__canvas {
  opacity: 0;
}

[data-moroc-ribbon][data-moroc-ribbon-state="live"] .moroc-ribbon__poster {
  visibility: hidden;
}

[data-moroc-ribbon][data-moroc-ribbon-state="live"] .moroc-ribbon__canvas {
  opacity: 1;
}