/* ecosystem: a fixed bento (client tokens only), the full height of the frame.
   Grid from the ecosystem template: four columns, five rows. */
.eco{ display:grid; gap:8px;
  grid-template-rows:148fr 136fr 45fr 157fr 89fr; grid-template-columns:180fr 217fr 259fr 249fr;
  grid-template-areas:"portrait logo photo photo" "portrait colours photo photo" "portrait ooh photo photo" "device ooh message mock" "type ooh message mock"; }
.eco-tile{ position:relative; min-width:0; min-height:0; border-radius:14px; overflow:hidden; background:var(--c-brand-4); container-type:size;   /* tile content sizes in cqw / cqh of its tile */
  box-shadow:0 1px 2px rgba(0,0,0,.08); }
.eco-tile > *{ width:100%; height:100%; }
.eco-portrait-tile{ grid-area:portrait; } .eco-logo-tile{ grid-area:logo; } .eco-colours-tile{ grid-area:colours; }
.eco-photo-tile{ grid-area:photo; } .eco-device-tile{ grid-area:device; } .eco-type-tile{ grid-area:type; }
.eco-ooh-tile{ grid-area:ooh; } .eco-message-tile{ grid-area:message; } .eco-mock-tile{ grid-area:mock; }

.eco-fill{ display:grid; place-items:center; }
.eco-logo{ background:var(--c-brand-1); color:var(--c-on-brand-1); }
.eco-logo .lg{ width:70%; height:78%; }
.eco-colours{ display:grid; grid-template-columns:repeat(5, 1fr); }
.eco-colours div{ display:flex; flex-direction:column; justify-content:flex-end; padding:8cqh 5cqw; gap:3cqh; }
.eco-colours b{ font:700 clamp(9px, 11cqh, 15px)/1.1 var(--c-display); letter-spacing:-.02em; writing-mode:vertical-rl; transform:rotate(180deg); }
.eco-colours span{ display:none; }
.eco-type{ background:var(--c-brand-5); color:var(--c-brand-1); display:flex; flex-direction:column; justify-content:flex-end; gap:4cqh; padding:12cqh 10cqw; }
.eco-aa{ font:800 min(48cqh, 40cqw)/.8 var(--c-display); letter-spacing:-.045em; }
.eco-type p{ margin:0; min-width:0; }
.eco-type b{ display:block; font:700 clamp(9px, 11cqh, 12px)/1.2 var(--c-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eco-type p span{ display:none; }
.eco-device{ background:var(--c-brand-4); }
.eco-ooh{ position:relative; }
.eco-poster{ position:absolute; left:18%; top:12%; width:64%; aspect-ratio:2 / 3; box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  outline:5px solid color-mix(in srgb, var(--c-brand-1) 88%, #000); }
.eco-msg .ad-h-xl{ top:auto; bottom:9cqmin; font-size:14cqmin; }