/* One composition for the website and iPhone artwork. Native captures retain
   their aspect ratios; foreground devices share a ground line. */
.ecosystem {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ecosystem-device { position: absolute; margin: 0; bottom: 4%; }
.ecosystem-frame {
  position: relative;
  z-index: 1;
  padding: .5cqw;
  border: .15cqw solid #71787c;
  border-radius: 1cqw;
  background: #171a1c;
  box-shadow: 0 1.7cqw 2cqw -1.4cqw #13222f60;
}
.ecosystem-frame img { display: block; width: 100%; height: auto; border-radius: .4cqw; }
.ecosystem-tv { z-index: 0; top: 0; bottom: auto; left: 8.35%; width: 83.3%; }
.ecosystem-tv .ecosystem-frame { padding: .55cqw; border-radius: .75cqw; }
.ecosystem-tv img { border-radius: .2cqw; }
.ecosystem-stand { position: relative; width: 12%; height: 3cqw; margin: 0 auto; background: #41474a; }
.ecosystem-stand::after { content: ""; position: absolute; width: 240%; left: -70%; bottom: 0; height: .5cqw; border-radius: 50% 50% 0 0; background: #363b3e; }
.ecosystem-mac { z-index: 1; left: 1%; width: 60%; }
.ecosystem-mac .ecosystem-frame { border-radius: 1cqw 1cqw .2cqw .2cqw; }
.ecosystem-base { position: relative; z-index: 2; width: 106%; margin-left: -3%; height: .85cqw; border-radius: .15cqw .15cqw 50% 50%; background: linear-gradient(#cbd0d3, #8b9399); box-shadow: 0 .4cqw .7cqw -.3cqw #192a3940; }
.ecosystem-base::after { content: ""; position: absolute; left: 44%; width: 12%; height: .25cqw; border-radius: 0 0 .3cqw .3cqw; background: #777f84; }
.ecosystem-ipad { z-index: 2; right: 0; width: 32.5%; }
.ecosystem-ipad .ecosystem-frame { padding: .7cqw; border-radius: 2cqw; }
.ecosystem-ipad img { border-radius: 1.25cqw; }
.ecosystem-iphone { z-index: 3; left: 58%; width: 14.8%; }
.ecosystem-iphone .ecosystem-frame { padding: .4cqw; border-width: .18cqw; border-radius: 2.55cqw; }
.ecosystem-iphone img { border-radius: 1.95cqw; }
.ecosystem-iphone .ecosystem-frame::after { content: ""; position: absolute; top: 4.2%; left: 37%; width: 26%; height: 3%; border-radius: 2cqw; background: #08090b; }
.ecosystem-watch { z-index: 4; right: 1.5%; width: 7.5%; bottom: 5.5%; }
.ecosystem-watch::before { content: ""; position: absolute; top: -15%; bottom: -15%; left: 22%; width: 56%; border-radius: .6cqw; background: #465058; }
.ecosystem-watch .ecosystem-frame { padding: .3cqw; border-width: .2cqw; border-radius: 1.9cqw; }
.ecosystem-watch img { border-radius: 1.4cqw; }