.social-rhythm, .outcome-panel, .brief-board, .system-wheel { justify-self: end; }
.social-rhythm { border-left: 1px solid var(--bright); display: grid; gap: 0; min-height: 300px; padding-left: 30px; width: 250px; }
.social-rhythm span { align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); color: var(--bright); display: flex; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.social-rhythm span:before { background: var(--bright); border-radius: 50%; content: ""; height: 8px; margin-left: -35px; margin-right: 18px; width: 8px; }
.social-sequence, .performance-line, .content-uses, .integrated-line { border-top: 1px solid var(--border-dark); display: flex; gap: 24px; margin-top: 48px; padding-top: 18px; }
.social-sequence span, .performance-line span, .content-uses span, .integrated-line span { color: var(--bright); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.outcome-panel { align-items: center; border: 1px solid rgba(27,248,166,.65); display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 30px; width: 300px; }
.outcome-panel span, .outcome-panel strong { color: var(--bright); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.outcome-panel i { color: rgba(255,255,255,.55); font-style: normal; }
.outcome-panel strong { border-top: 1px solid var(--bright); flex-basis: 100%; padding-top: 18px; text-align: center; }
.performance-line span { border-right: 1px solid var(--border-dark); flex: 1; }
.performance-line span:last-child { border-right: 0; }
.brief-board { border-left: 1px solid var(--bright); display: grid; grid-template-columns: 1fr 1fr; min-height: 250px; padding: 0 0 0 30px; width: 310px; }
.brief-board span { border-bottom: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .12em; padding: 18px 10px 18px 0; text-transform: uppercase; }
.brief-board strong { color: var(--bright); font-size: 62px; font-weight: 400; grid-column: 1 / -1; letter-spacing: -.08em; padding-top: 35px; }
.content-uses span { border: 1px solid rgba(27,248,166,.55); padding: 8px 10px; }
.system-wheel { border: 1px solid rgba(27,248,166,.55); border-radius: 50%; display: grid; height: 310px; place-items: center; position: relative; width: 310px; }
.system-wheel strong { color: var(--bright); font-size: 60px; font-weight: 400; position: absolute; }
.system-wheel span { color: rgba(255,255,255,.75); font-size: 10px; letter-spacing: .12em; position: absolute; text-transform: uppercase; }
.system-wheel span:nth-child(1) { top: 42px; }.system-wheel span:nth-child(2) { right: 28px; top: 120px; }.system-wheel span:nth-child(3) { bottom: 55px; right: 55px; }.system-wheel span:nth-child(4) { bottom: 55px; left: 50px; }.system-wheel span:nth-child(5) { left: 25px; top: 120px; }
@media (max-width: 850px) { .social-rhythm, .outcome-panel, .brief-board, .system-wheel { margin: 60px auto 0; } .social-rhythm { min-height: 230px; } .social-sequence, .performance-line, .content-uses, .integrated-line { flex-wrap: wrap; gap: 14px; margin-top: 38px; } .outcome-panel { width: 280px; } .brief-board { min-height: 210px; width: 280px; } .system-wheel { height: 230px; width: 230px; } .system-wheel strong { font-size: 48px; } .system-wheel span:nth-child(1) { top: 28px; }.system-wheel span:nth-child(2) { right: 18px; top: 92px; }.system-wheel span:nth-child(3) { bottom: 38px; right: 36px; }.system-wheel span:nth-child(4) { bottom: 38px; left: 30px; }.system-wheel span:nth-child(5) { left: 16px; top: 92px; } }
@media (max-width: 520px) { .social-rhythm { width: 220px; } .brief-board strong { font-size: 52px; } }