body.home {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

.home .site-main {
  overflow: hidden;
}

body.home::before,
body.home::after {
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  content: "";
  opacity: 0.16;
  pointer-events: none;
}

body.home::before {
  top: 1700px;
  background: url("../../images/home-decor-1.webp") center / 100% 100% no-repeat;
  aspect-ratio: 1440 / 1985;
}

body.home::after {
  bottom: 0;
  background: url("../../images/home-decor-2.webp") center 100px / 100% auto
    no-repeat;
  aspect-ratio: 1440 / 2307;
}

@media (max-width: 1439px) {
  body.home {
    --home-decor-one-fluid-shift: calc(1080px - 75vw);
    --home-decor-one-layout-shift: 0px;
    --home-decor-two-shift: calc(1440px - 100vw);
  }

  body.home::before {
    top: calc(
      1700px + var(--home-decor-one-fluid-shift) +
        var(--home-decor-one-layout-shift)
    );
  }

  body.home::after {
    bottom: var(--home-decor-two-shift);
  }
}

@media (max-width: 1100px) and (min-width: 1001px) {
  body.home {
    /* The product grid changes from one row to two rows. */
    --home-decor-one-layout-shift: 477px;
  }
}

@media (max-width: 1000px) and (min-width: 769px) {
  body.home {
    /* The benefits grid also changes from one row to two rows. */
    --home-decor-one-layout-shift: 520px;
  }
}

@media (max-width: 768px) {
  body.home::after {
    bottom: calc(var(--home-decor-two-shift) + 300px);
  }
}

@media (max-width: 600px) {
  body.home::before {
    top: calc(
      1600px + var(--home-decor-one-fluid-shift) +
        var(--home-decor-one-layout-shift)
    );
  }
}

@supports (overflow: clip) {
  body.home {
    overflow-x: clip;
  }

  .home .site-main {
    overflow: clip;
  }
}