*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#app{padding:2rem}.acc{display:flex;width:100%;height:480px;border-radius:4px;overflow:hidden}.acc-panel{--collapsed: 110px;position:relative;display:flex;flex:0 0 var(--collapsed);height:100%;min-width:0;overflow:hidden;cursor:pointer;outline-offset:-3px}.acc-panel.is-active{flex-basis:calc(100% - 4 * var(--collapsed))}.acc-panel__media{position:relative;flex:1 1 100%;height:100%;min-width:0;background-color:#16181d;background-size:cover;background-position:center}.acc-panel.is-active .acc-panel__media{flex:0 0 70%}.acc-panel__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000b3,#0000 60%);pointer-events:none}.acc-panel__caption{position:absolute;left:50%;bottom:24px;transform:translate(-50%) rotate(180deg);writing-mode:vertical-rl;color:#fff;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:1;transition:opacity .25s ease;z-index:2}.acc-panel.is-active .acc-panel__caption{opacity:0;pointer-events:none}.acc-panel__content{position:relative;flex:0 0 0%;height:100%;min-width:0;overflow:hidden;background:#16181d;color:#fff;padding:0;display:flex;flex-direction:column;justify-content:center}.acc-panel.is-active .acc-panel__content{flex-basis:30%;padding:32px}.acc-panel__content-inner{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}.acc-panel__content-inner.is-visible{opacity:1;transform:translateY(0)}.acc-panel__content h3{margin:0 0 8px;font-size:22px}.acc-panel__content p{margin:0 0 16px;font-size:14px;line-height:1.5;opacity:.85}.acc-panel__btn{display:inline-block;align-self:flex-start;padding:8px 20px;border:1px solid #fff;color:#fff;font-size:14px;text-decoration:none;transition:background .3s,color .3s}.acc-panel__btn:hover{background:#fff;color:#16181d}@media(max-width:1024px){.acc{position:relative;height:460px}.acc-panel{position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s ease}.acc-panel.is-active{opacity:1;pointer-events:auto}.acc-panel.is-active .acc-panel__media,.acc-panel:not(.is-active) .acc-panel__media{flex:1 1 auto;width:100%;height:auto}.acc-panel.is-active .acc-panel__content,.acc-panel:not(.is-active) .acc-panel__content{flex:0 0 auto;width:100%;height:auto;padding:16px}.acc-panel__content p{display:none}}.acc-dots{display:none}@media(max-width:1024px){.acc-dots{display:flex;justify-content:center;gap:10px;margin-top:14px}.acc-dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:#cfd3da;cursor:pointer}.acc-dots button.is-active{background:#16181d}}@media(prefers-reduced-motion:reduce){.acc-panel,.acc-panel__caption,.acc-panel__content-inner,.acc-panel__btn{transition:none}}