.page_banner_demo_page__4AmnI{padding:40px 20px;max-width:800px;margin:0 auto;max-width:1200px}.page_banner_demo_page-description__JJYNs{margin-bottom:30px;color:#666}.page_banner_demo_page-section__ONzCZ{margin-bottom:40px}.page_banner_demo_page-section-note__SyJvz{margin-top:10px;color:#666}.banner{position:relative;width:100%;height:var(--banner-height,300px);overflow:hidden;user-select:none}.banner:focus{outline:2px solid #1976d2;outline-offset:2px}.banner-track,.banner-wrapper{position:relative;width:100%;height:100%}.banner-track{cursor:grab}.banner-track:active{cursor:grabbing}.banner-slide{position:absolute;top:50%;left:50%;width:100%;height:100%;transition:all var(--banner-transition-duration,.3s) ease-in-out}.banner-slide[css-state=hidden]{z-index:0;opacity:0}.banner-slide[css-state=active]{z-index:3;opacity:1;transform:translate(-50%,-50%) translateX(var(--banner-drag-offset,0)) scale(1)}.banner-slide[css-state=prev]{z-index:1;opacity:.7;transform:translate(-50%,-50%) translateX(calc(-35% + var(--banner-drag-offset, 0))) scale(.85)}.banner-slide[css-state=next]{z-index:1;opacity:.7;transform:translate(-50%,-50%) translateX(calc(35% + var(--banner-drag-offset, 0))) scale(.85)}.banner-slide-content{position:relative;width:100%;height:100%}.banner-slide-content-image{width:100%;height:100%;object-fit:cover;pointer-events:none}.banner-slide-content-text{position:absolute;bottom:0;left:0;width:100%;padding:30px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}.banner-slide-content-text-title{margin:0 0 10px;font-size:32px;font-weight:700}.banner-slide-content-text-description{margin:0;font-size:16px;color:hsla(0,0%,100%,.9)}.banner[css-has-3d=true] .banner-slide[css-state=next],.banner[css-has-3d=true] .banner-slide[css-state=prev]{filter:brightness(.8)}.banner-nav{position:absolute;top:50%;z-index:10;transform:translateY(-50%)}.banner-nav[css-position=prev]{left:20px}.banner-nav[css-position=next]{right:20px}.banner-nav-btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;font-size:32px;font-weight:300;color:#fff;background-color:rgba(0,0,0,.5);backdrop-filter:blur(4px);cursor:pointer;transition:all .3s}.banner-nav-btn:hover{background-color:rgba(0,0,0,.7);transform:scale(1.1)}.banner-nav-btn:active{transform:scale(.95)}.banner-indicators{position:absolute;bottom:20px;left:50%;z-index:10;display:flex;gap:10px;transform:translateX(-50%)}.banner-indicators-item{width:12px;height:12px;border-radius:50%;background-color:hsla(0,0%,100%,.5);cursor:pointer;transition:all .3s}.banner-indicators-item:hover{background-color:hsla(0,0%,100%,.8);transform:scale(1.2)}.banner-indicators-item[css-is-active=true]{background-color:#fff;transform:scale(1.3)}