/* Alternate review version: extend the organic edge art to the section bounds. */

@media (min-width: 1201px) {
  .gsb__stage::before,
  .gsb__stage::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    display: block;
    pointer-events: none;
  }

  /* Stretched dune-grass crop. A long, low-contrast feather lets the lower-left
     watercolor dissolve into the section paper without a visible patch edge. */
  .gsb__stage::before {
    left: 0;
    width: calc(var(--rail) + 340 * var(--u));
    height: calc(390 * var(--u));
    background-image: url("../good-sam-booking-perfect-html/design.png");
    background-repeat: no-repeat;
    background-position: calc(-58 * var(--u)) bottom;
    background-size: calc(2600 * var(--u)) calc(960 * var(--u));
    opacity: .68;
    filter: saturate(.76) contrast(.9);
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,.88) 0, rgba(0,0,0,.78) 24%, rgba(0,0,0,.48) 52%, rgba(0,0,0,.16) 78%, transparent 100%),
      linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 18%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.2) 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, rgba(0,0,0,.88) 0, rgba(0,0,0,.78) 24%, rgba(0,0,0,.48) 52%, rgba(0,0,0,.16) 78%, transparent 100%),
      linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 18%, rgba(0,0,0,.86) 42%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.2) 90%, transparent 100%);
    mask-composite: intersect;
  }

  /* Ocean and splash crop carried through the right rail to the section edge. */
  .gsb__stage::after {
    right: 0;
    width: calc(var(--rail) + 650 * var(--u));
    height: calc(194 * var(--u));
    background-image:
      radial-gradient(ellipse at 88% 6%, rgba(125,204,217,.24) 0 9%, transparent 34%),
      radial-gradient(ellipse at 72% 34%, rgba(144,211,220,.18) 0 8%, transparent 31%),
      url("../good-sam-booking-perfect-html/design.png");
    background-repeat: no-repeat;
    background-position: right top, 76% 32%, right bottom;
    background-size: 54% 118%, 46% 105%, calc(1639 * var(--u)) calc(960 * var(--u));
    opacity: .92;
    filter: saturate(.94) contrast(.96);
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, rgba(0,0,0,.2) 14%, #000 37% 100%),
      linear-gradient(to bottom, transparent 0, rgba(0,0,0,.78) 20%, #000 45%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, rgba(0,0,0,.2) 14%, #000 37% 100%),
      linear-gradient(to bottom, transparent 0, rgba(0,0,0,.78) 20%, #000 45%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }
}