:root {
  background: var(--page-background);
  font-family: var(--font-primary);
}

body {
  margin: 0;
}

button, input, select, textarea {
  font-family: var(--font-primary);
}

                                                                               
main > soulmate-mobile-hero { --hero-next-background: var(--page-background); }
main > soulmate-mobile-hero .sm-hero-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), transparent);
}

@media (min-width: 1024px) {
  main > soulmate-mobile-hero { --hero-next-background: var(--hero-background); }
  main > soulmate-mobile-hero .sm-hero-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  }
}

                                                                               
.hero-preview-continuation {
  min-height: 100svh;
}