:host,
.outer {
  display: flex;
  width: 100%;
  height: 100%;

  justify-content: center;
  align-items: center;
}

.inner {
  display: block;

  // The container will be sized by the provider resize controller, but don't
  // allow the outer container to shrink or contain the inner (as we need to
  // calculate the true intrinsic size, otherwise on landscape videos the
  // rotated size will be incorrectly calculated).
  flex-shrink: 0;
}
:host([rotated]) .inner {
  transform: rotate(var(--advanced-camera-card-media-rotation, 0deg));
}