#sf-background {
  --y-distance: 65%;
  --x-distance: 8%;
  background-color: var(--sf-theme-primary);
  transition:background-color var(--sf-theme-transition), opacity var(--sf-theme-transition);
  position: relative;
}

.sf-foreground {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition:background-color var(--sf-theme-transition), opacity var(--sf-theme-transition);
}

.sf-horizon {
  top: auto;
  bottom: -6%;
  width: 120%;
  height: max(30vw, 220px);
}

.sf-foreground path {
  transition:fill var(--sf-theme-transition);
}

body.sf-intersecting-products #sf-background .sf-foreground {
  opacity: 1;
}

.sf-dots__square {
  width: 25%;
  right: 3%;
  bottom: 0;
}

.sf-dots__rectangle {
  width: 30%;
}

.sf-cloud {
  width: 100%;
}

.sf-cloud.sf-cloud-back {
  top: var(--y-distance);
  left: var(--x-distance);
  max-width: max(15%, 119px);
}

.sf-cloud.sf-cloud-front {
  top: calc(var(--y-distance)* 1.1);
  left: calc(var(--x-distance)* 2);
  right: auto;
  max-width: max(34%, 250px);
  z-index: 3;
}

.sf-pueblo-house {
  bottom: max(-7%, -20px);
  left: -20%;
  width: max(46%, 300px);
  z-index: 2;
}

#sf-background[data-sf-theme="pink-grapefruit"] .sf-dots__rectangle path {
  fill: var(--sf-theme-accent);
}

#sf-background[data-sf-theme="raspberry-lime"] .sf-dots__rectangle path {
  fill: var(--sf-theme-secondary);
}

#sf-background[data-sf-theme="lemon"] .sf-pueblo-house .sf-roof,
#sf-background[data-sf-theme="lemon"] .sf-pueblo-house .sf-pole,
#sf-background[data-sf-theme="lemon"] .sf-pueblo-house .cls-6 {
  fill: var(--sf-theme-midground)
}

#sf-background[data-sf-theme="pink-grapefruit"] .sf-pueblo-house .sf-roof,
#sf-background[data-sf-theme="pink-grapefruit"] .sf-pueblo-house .sf-pole,
#sf-background[data-sf-theme="pink-grapefruit"] .sf-pueblo-house .cls-4 {
  fill: var(--sf-theme-accent)
}

#sf-background[data-sf-theme="pink-grapefruit"] .sf-pueblo-house .cls-5 {
  fill: var(--sf-theme-secondary);
}

#sf-background[data-sf-theme="raspberry-lime"] .cls-4 {
  fill: var(--sf-theme-midground);
}

#sf-background[data-sf-theme="raspberry-lime"] .cls-6 {
  fill: var(--sf-theme-secondary);
}

[data-sf-parallax] {
  will-change: transform;
}

@media only screen and (min-width: 769px) {
  #sf-background {
    --y-distance:38%;
  }
}