.carousel{max-width:900px;margin:var(--space-lg) auto;border-radius:var(--radius-lg);background-color:var(--color-surface);position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001a}.carousel:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.carousel--single .carousel__caption{background:var(--color-surface-elevated);color:var(--color-text-secondary);padding:var(--space-md);position:relative}.carousel__viewport{position:relative;overflow:hidden}.carousel__figure{margin:0;position:relative}.carousel__image{object-fit:cover;width:100%;height:auto;max-height:550px;transition:opacity var(--transition-base);display:block}.carousel__image.uncropped{object-fit:contain}.carousel__caption{padding:var(--space-md) var(--space-lg);color:var(--color-text-white);font-size:var(--text-sm);text-align:center;background:#000000d9;font-style:italic;position:absolute;bottom:0;left:0;right:0}.carousel__nav{z-index:2;border-radius:var(--radius-full);cursor:pointer;width:44px;height:44px;transition:all var(--transition-fast);background:#ffffffe6;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 8px #00000026}.carousel__nav:hover{background:var(--color-text-white);transform:translateY(-50%)scale(1.1);box-shadow:0 4px 12px #0003}.carousel__nav-icon{color:var(--color-text-primary);font-size:24px;line-height:1}.carousel__nav--prev{left:var(--space-md)}.carousel__nav--next{right:var(--space-md)}.carousel__dots{justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-surface-elevated);display:flex}.carousel__dot{border-radius:var(--radius-full);border:2px solid var(--color-primary);cursor:pointer;width:10px;height:10px;transition:all var(--transition-fast);background:0 0;padding:0}.carousel__dot:hover{background:var(--color-accent-light)}.carousel__dot--active{background:var(--color-primary);transform:scale(1.2)}.carousel__counter{top:var(--space-md);right:var(--space-md);padding:var(--space-xs) var(--space-sm);color:var(--color-text-white);font-size:var(--text-sm);border-radius:var(--radius-sm);background:#0009;font-weight:500;position:absolute}@media (max-width:480px){.carousel__nav{width:36px;height:36px}.carousel__nav-icon{font-size:20px}.carousel__nav--prev{left:var(--space-sm)}.carousel__nav--next{right:var(--space-sm)}}
