/* styles/sections/product-panel.css
 * The band that holds the faux app (js/faux-app.js): white above, grained fern below, the app
 * window straddling the seam. Frames draw the seam at 46.2% (390), 44.7% (1440) and 45.45%
 * (1920) of the band and the app at 358 x 780, 1280 x 740 and 1600 x 830. */
@layer sections {
  .product-panel {
    --page-gutter: var(--space-16);
    padding-bottom: var(--section-xs);
    background: linear-gradient(to bottom, var(--white) 46.2%, var(--fern) 46.2%);
  }

  .product-panel__app {
    --fa-height: 780px;
    --fa-shadow: var(--elevation-app-m);
  }

  @media (width >= 900px) {
    .product-panel {
      --page-gutter: 80px;
      background: linear-gradient(to bottom, var(--white) 44.7%, var(--fern) 44.7%);
    }

    .product-panel__app {
      --fa-height: 740px;
      --fa-shadow: var(--elevation-app);
    }
  }

  @media (width >= 1680px) {
    .product-panel {
      --page-gutter: 120px;
      --container-max: 1600px;
      background: linear-gradient(to bottom, var(--white) 45.45%, var(--fern) 45.45%);
    }

    .product-panel__app {
      --fa-height: 830px;
    }
  }
}