/* Native CSS illustration of the synchronized screen network. */
.screen-device { padding: 9px; border: 1px solid #4a4a4a; border-radius: 10px; background: linear-gradient(145deg, #292929, #050505 70%); box-shadow: 0 30px 45px rgba(0,0,0,.5), inset 1px 1px rgba(255,255,255,.12); }
.screen-device > span, .inside-screens > span { display: block; margin-bottom: 10px; color: rgba(255,255,255,.48); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.screen-outside { height: 350px; transform: perspective(900px) rotateY(7deg); }
.screen-content { height: calc(100% - 25px); padding: 17px; position: relative; overflow: hidden; color: white; background: radial-gradient(circle at 100% 0, rgba(255,90,54,.85), transparent 37%), #0a0a0a; border: 1px solid #303030; }
.screen-content::before { content: 'FESTIVAL UPDATE'; display: block; color: var(--acid); font-size: 6px; font-weight: 900; letter-spacing: .15em; }
.screen-content b { display: block; margin-top: 35px; font-family: var(--display); font-size: 42px; line-height: .78; }
.screen-content i { display: block; height: 1px; margin-top: 25px; background: var(--acid); position: relative; }
.screen-content i::after { content: ''; position: absolute; right: 15%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid);  }
.screen-content small { display: block; margin-top: 18px; color: rgba(255,255,255,.46); font-size: 6px; letter-spacing: .1em; }
.sync-signal { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sync-signal span { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--acid);  }
.sync-signal span:nth-child(2) { animation-delay: .2s; }.sync-signal span:nth-child(3) { animation-delay: .4s; }
.sync-signal b { color: rgba(255,255,255,.35); font-size: 6px; letter-spacing: .14em; writing-mode: vertical-rl; }
.inside-screens > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.screen-inside { height: 230px; transform: perspective(900px) rotateY(-5deg); }
.screen-inside:last-child { transform: perspective(900px) rotateY(5deg); }
.screen-inside .screen-content { padding: 10px; }
.screen-inside .screen-content::before { font-size: 4px; }
.screen-inside .screen-content b { margin-top: 28px; font-size: 24px; }
.inside-screens > small { display: block; margin-top: 12px; color: rgba(255,255,255,.38); font-size: 11px; line-height: 1.45; text-align: center; }