/* V21 · 3-device background artwork with independent art direction.
   Breakpoints: desktop >1024px, tablet 641–1024px, mobile <=640px.
   Unspecified device falls back to the wider device, then the section default. */
.hero, .about, .thanks-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.hero {
  background-image: var(--v21-hero-bg-desktop, url("images/hero-background.svg"));
  background-position: var(--v21-hero-pos-desktop, center center);
}
.about {
  background-image: var(--v21-about-bg-desktop, url("images/about-background.svg"));
  background-position: var(--v21-about-pos-desktop, center center);
}
.thanks-section {
  background-image: var(--v21-thanks-bg-desktop, linear-gradient(130deg,#348b83,#2b7779));
  background-position: var(--v21-thanks-pos-desktop, center center);
}
@media (max-width: 1024px) {
  .hero {
    background-image: var(--v21-hero-bg-tablet, var(--v21-hero-bg-desktop, url("images/hero-background.svg")));
    background-position: var(--v21-hero-pos-tablet, var(--v21-hero-pos-desktop, center center));
  }
  .about {
    background-image: var(--v21-about-bg-tablet, var(--v21-about-bg-desktop, url("images/about-background.svg")));
    background-position: var(--v21-about-pos-tablet, var(--v21-about-pos-desktop, center center));
  }
  .thanks-section {
    background-image: var(--v21-thanks-bg-tablet, var(--v21-thanks-bg-desktop, linear-gradient(130deg,#348b83,#2b7779)));
    background-position: var(--v21-thanks-pos-tablet, var(--v21-thanks-pos-desktop, center center));
  }
}
@media (max-width: 640px) {
  .hero {
    background-image: var(--v21-hero-bg-mobile, var(--v21-hero-bg-tablet, var(--v21-hero-bg-desktop, url("images/hero-background.svg"))));
    background-position: var(--v21-hero-pos-mobile, var(--v21-hero-pos-tablet, var(--v21-hero-pos-desktop, center center)));
  }
  .about {
    background-image: var(--v21-about-bg-mobile, var(--v21-about-bg-tablet, var(--v21-about-bg-desktop, url("images/about-background.svg"))));
    background-position: var(--v21-about-pos-mobile, var(--v21-about-pos-tablet, var(--v21-about-pos-desktop, center center)));
  }
  .thanks-section {
    background-image: var(--v21-thanks-bg-mobile, var(--v21-thanks-bg-tablet, var(--v21-thanks-bg-desktop, linear-gradient(130deg,#348b83,#2b7779))));
    background-position: var(--v21-thanks-pos-mobile, var(--v21-thanks-pos-tablet, var(--v21-thanks-pos-desktop, center center)));
  }
}