.wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--app-viewport-height, 100dvh);
  overflow: hidden;
}

.imageScrim {
  position: absolute;
  inset: 0;
  background: rgba(25, 17, 23, 0.08);
  box-shadow:
    inset 0 -290px 150px -145px rgba(20, 12, 18, 0.78),
    inset 0 110px 90px -90px rgba(11, 8, 10, 0.42);
  z-index: 1;
  pointer-events: none;
}

.favoriteAction {
  position: absolute;
  top: calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px));
  right: calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px));
  z-index: 4;
}

.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding:
    calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
    calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
    calc(
      var(--spacing-md, 12px) + var(--app-safe-bottom, 0px) +
        var(--app-bottom-nav-height, 64px)
    )
    calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
}

.spacer {
  flex: 1 1 auto;
}

.bottomStack {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3.6vw, 18px);
  padding-bottom: clamp(12px, 3.6vw, 18px);
}