:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --viewport-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  --viewport-width: calc(100vw - var(--safe-left) - var(--safe-right));
}

.responsive-frame {
  --frame-aspect: 1;
  --frame-max-width: 100%;
  --frame-horizontal-gap: 0px;
  --frame-vertical-gap: 0px;
  --frame-min-width: 0px;
  --frame-min-height: 0px;
  --_responsive-width: max(
    var(--frame-min-width),
    var(--viewport-width) - 2 * var(--frame-horizontal-gap)
  );
  --_responsive-height: max(
    var(--frame-min-height),
    var(--viewport-height) - 2 * var(--frame-vertical-gap)
  );
  width: min(
    var(--frame-max-width),
    var(--_responsive-width),
    calc(var(--_responsive-height) * var(--frame-aspect))
  );
  max-height: var(--_responsive-height);
}

.responsive-frame--wide {
  --frame-aspect: 1.7777778;
}

.responsive-frame--tall {
  --frame-aspect: 0.5625;
}

.responsive-frame--tower {
  --frame-aspect: 0.6666667;
}

.responsive-frame--square {
  --frame-aspect: 1;
}

@media (max-width: 720px), (max-height: 720px) {
  .mobile-full-bleed {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
}