.portfolio-studio[data-resizable=true] { grid-template-columns: var(--sidebar-width,292px) minmax(0,1fr); gap: 24px; }
.studio-sidebar { position: sticky; top: 18px; align-self: start; min-width: 0; }
.sidebar-inner { width: 100%; max-width: 520px; margin-inline: auto; }
.sidebar-inner > .catalog-filters, .sidebar-inner > .visual-configurator { position: relative; top: auto; width: 100%; }
.studio-sidebar :is(.catalog-filters, .visual-options, .video-config-body) { scrollbar-width: none; }
.studio-sidebar :is(.catalog-filters, .visual-options, .video-config-body)::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sidebar-resize-handle { position: absolute; z-index: 2; top: 0; bottom: 0; right: -24px; width: 24px; cursor: col-resize; touch-action: none; outline-offset: 1px; }
.sidebar-resize-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--purple); opacity: .7; transition: opacity 160ms; }
.sidebar-resize-icon { position: absolute; top: 50%; left: 50%; width: 24px; height: 32px; transform: translate(-50%,-50%); display: grid; place-items: center; background: var(--bg); color: var(--purple); pointer-events: none; opacity: .85; transition: opacity 160ms; }
.sidebar-resize-icon svg { display: block; width: 20px; height: 20px; }
.sidebar-resize-handle:hover::before, .sidebar-resize-handle:focus-visible::before, .sidebar-resize-handle[data-dragging=true]::before,
.sidebar-resize-handle:hover .sidebar-resize-icon, .sidebar-resize-handle:focus-visible .sidebar-resize-icon, .sidebar-resize-handle[data-dragging=true] .sidebar-resize-icon { opacity: 1; }
.sidebar-is-resizing, .sidebar-is-resizing * { cursor: col-resize !important; user-select: none !important; }
.portfolio-studio[data-resizable=true] > .portfolio-gallery { container-type: inline-size; container-name: studio-gallery; min-width: 0; }
@container studio-gallery (min-width: 1280px) { .portfolio-masonry, .motion-masonry { columns: 4; } }
@container studio-gallery (min-width: 851px) and (max-width: 1279px) { .portfolio-masonry, .motion-masonry { columns: 3; } }
@container studio-gallery (min-width: 561px) and (max-width: 850px) { .portfolio-masonry, .motion-masonry { columns: 2; } }
@container studio-gallery (max-width: 560px) { .portfolio-masonry, .motion-masonry { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .sidebar-resize-handle::before, .sidebar-resize-icon { transition: none; } }