.demo1-hero {display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; margin:0; padding-bottom:40px;}
.demo1-hero-slider {position:relative; min-width:0; overflow:hidden; border-radius:10px; background:#17212a;}
.demo1-hero-slider:only-child {grid-column:1 / -1; aspect-ratio:16/9;}
.demo1-hero-slide {position:absolute; inset:0; margin:0;}
.demo1-hero-slide[hidden] {display:none;}
.demo1-hero-link {display:block; position:relative; height:100%; width:100%; color:#fff; overflow:hidden;}
.demo1-hero-link::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 18%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.88) 100%);}
.demo1-hero-link > img {display:block; width:100%; height:100%; object-fit:cover;}
.demo1-hero-copy {position:absolute; z-index:1; bottom:70px; left:30px; right:30px;}
.demo1-hero-category {display:inline-block; padding:7px 10px; background:rgba(0,0,0,.72); font-size:11px; font-weight:700; line-height:1.2; text-transform:uppercase; margin-bottom:12px;}
.demo1-hero-copy h2 {margin:0; color:#fff; font-size:clamp(25px,2.6vw,36px); font-weight:700; line-height:1.15; text-transform:none; text-shadow:0 1px 3px #0005;}
.demo1-hero-side {display:grid; grid-template-rows:repeat(2,1fr); gap:12px; min-width:0;}
.demo1-hero-side-card {aspect-ratio:1.4; position:relative; margin:0; border-radius:10px; overflow:hidden; background:#17212a;}
.demo1-hero-side-card .demo1-hero-copy {left:18px; right:18px; bottom:18px;}
.demo1-hero-copy h3 {margin:0; color:#fff; font-size:18px; line-height:1.25; font-weight:600; text-transform:none;}
.demo1-hero-controls {position:absolute; z-index:2; bottom:16px; left:30px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.demo1-hero-dots,.demo1-hero-actions {display:flex; align-items:center; gap:8px;}
.demo1-hero-controls button {border:0; cursor:pointer; color:white;}
.demo1-hero-dots button {position:relative; width:24px; height:28px; padding:0; background:transparent;}
.demo1-hero-dots button::after {content:""; display:block; height:4px; border-radius:4px; background:#ffffff60;}
.demo1-hero-dots button[aria-pressed="true"]::after {background:#fff;}
.demo1-hero-actions button {width:34px; height:34px; border-radius:50%; background:#ffffff26; font-size:25px; line-height:1; padding:0;}
.demo1-hero-actions [data-hero-pause] {font-size:15px;}
.demo1-hero a:focus-visible,.demo1-hero button:focus-visible {outline:3px solid #fff; outline-offset:-3px;}
@media(max-width:991px) {
  .demo1-hero {grid-template-columns:1fr;}
  .demo1-hero-slider {aspect-ratio:16/10;}
  .demo1-hero-side {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;}
}
@media(max-width:575px) {
  .demo1-hero {gap:10px; padding-bottom:30px;}
  .demo1-hero-slider {aspect-ratio:1;}
  .demo1-hero-copy {left:18px;right:18px;bottom:66px;}
  .demo1-hero-copy h2 {font-size:25px;}
  .demo1-hero-controls {left:18px;right:18px;}
  .demo1-hero-side {grid-template-columns:1fr;gap:10px;}
  .demo1-hero-side-card {aspect-ratio:1.5;}
}