.ych-slider{ position:relative; width:100%; overflow:hidden; display:flex; align-items:stretch; gap:16px; }
.ych-slider-inner{ position:relative; flex:0 0 80%; aspect-ratio:16/9; }
.ych-slider-slide{ display:none; text-align:center; width:100%; height:100%; }
/* ensure slide images fill area and keep identical sizing by cropping when needed */
.ych-slider-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.ych-slide-caption{ position:relative; padding:10px; background:rgba(0,0,0,0.4); color:#fff; max-width:80%; margin:10px auto; }

/* Right side stacked banners at fixed 20% width */
.ych-right-banners{ position:relative; flex:0 0 20%; display:flex; flex-direction:column; gap:12px; z-index:5; align-items:stretch; }
.ych-right-banner img{ width:auto; height:auto; object-fit:cover; display:block; border:1px solid #eee; }

/* ensure each banner box shares the same height when stacked */
.ych-right-banners .ych-right-banner{ display:block; flex:1 1 0; overflow:hidden }

/* Bottom-left navigation */
.ych-slider-nav{ position:absolute; left:20px; bottom:18px; display:flex; gap:8px; align-items:center; z-index:10; }
.ych-slider-nav .ych-nav-item{ width:8px; height:8px; padding:0; border-radius:50%; border:0; background:#bbb; transition: all 150ms ease; cursor:pointer; }
.ych-slider-nav .ych-nav-item:hover{ transform:scale(1.6); background:#f5c000; }
.ych-slider-nav .ych-nav-item.active{ width:14px; height:14px; background:#f5c000; }

/* Arrow navigation */
.ych-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:12; width:44px; height:44px; border-radius:50%; border:0; padding:0; margin:0; background:rgba(0,0,0,0.35); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all 160ms ease; }
.ych-arrow:hover{ transform:translateY(-50%) scale(1.08); background:rgba(0,0,0,0.5); }
.ych-arrow-left{ left:8px; }
.ych-arrow-right{ right:8px; }

/* change cursor while dragging */
.ych-slider-inner{ cursor:grab; }
.ych-slider-inner:active{ cursor:grabbing; }

/* Make sure banners don't overlap main slider on small screens */
@media (max-width:900px){ .ych-slider{ flex-direction:column } .ych-right-banners{ position:static; width:100%; flex-direction:row; gap:8px; margin-top:12px; } .ych-right-banner img{ max-height:80px; object-fit:cover; } }