.messageContainer {
  /* Safari bug where absolutely positioned content isn't viewable over */
  /* transform: translate3d(0, 0, 0) from <BlurContents> */
  transform: translate3d(0, 0, 0);

  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: white;

  /* Allow tap through to the media viewer */
  pointer-events: none;

  container-type: size;
}

.warningIcon {
  font-size: 42px;
}

.title,
.description {
  display: none;
}

.showIfTaller {
  @container (min-height: 150px) {
    display: block;
  }
}

.title {
  composes: showIfTaller;

  font-size: 1.2em;
  font-weight: 600;

  margin-top: 8px;
}

.description {
  composes: showIfTaller;

  font-size: 0.875em;
  opacity: 0.7;
}
