c4-hero-columns{position:relative;display:block}c4-hero-columns>.campaign-columns{grid-template-columns:repeat(var(--columns, 2),minmax(0,1fr))}c4-hero-columns[data-indicator=dots] .campaign-links{top:50%;right:calc(var(--campaign-pad) - 7px);left:auto;flex-direction:column;gap:0;translate:0 -50%;text-shadow:none}c4-hero-columns[data-indicator=dots] .campaign-links a{position:relative;justify-content:center;width:20px;min-height:22px;font-size:0}c4-hero-columns[data-indicator=dots] .campaign-links a:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff8;box-shadow:0 0 0 1px #0002;transition:background .18s var(--nav-ease),scale .45s var(--nav-spring)}c4-hero-columns[data-indicator=dots] .campaign-links a[aria-current]:before{background:#fff}c4-hero-columns[data-indicator=dots] .campaign-links a:hover:before{scale:1.35}c4-hero-columns[data-rail] :is(.campaign-links,.campaign-rail){display:none}.hero-dots{position:absolute;top:50%;right:calc(var(--gutter-base, var(--gutter)) / -2 - 10px);z-index:2;display:flex;flex-direction:column;translate:0 -50%}.hero-dots a{position:relative;display:grid;place-items:center;width:20px;height:22px;color:var(--ink);text-decoration:none}.hero-dots a:before{content:"";width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent);transition:background .18s var(--nav-ease),scale .45s var(--nav-spring)}.hero-dots a[aria-current]:before{background:var(--ink)}.hero-dots a:hover:before{scale:1.35}.hero-dots a:focus-visible{outline:2px solid var(--ink);outline-offset:0;border-radius:4px}.hero-dots span{position:absolute;top:50%;right:26px;padding:5px 10px;border-radius:99px;background:var(--ink);color:var(--paper);font:500 12px/1.2 var(--font-display);white-space:nowrap;translate:4px -50%;opacity:0;pointer-events:none;transition:opacity .18s var(--nav-ease),translate .35s var(--nav-spring)}.hero-dots a:is(:hover,:focus-visible) span{opacity:1;translate:0 -50%}@media(prefers-reduced-motion:reduce){.hero-dots a:before,.hero-dots span,c4-hero-columns .campaign-links a:before{transition:none}}@property --ring{syntax: "<number>"; inherits: false; initial-value: 0;}c4-hero-columns[data-indicator=dots] [data-running] .campaign-cta:before{display:none}c4-hero-columns[data-indicator=dots] .campaign-links a:after,.hero-dots a:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;translate:-50% -50%;background:conic-gradient(currentColor calc(var(--ring) * 1turn),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.25px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.25px));opacity:0;transition:opacity .25s var(--nav-ease)}c4-hero-columns[data-indicator=dots] .campaign-links a[aria-current]:after,.hero-dots a[aria-current]:after{opacity:1}c4-hero-columns[data-indicator=dots] c4-slideshow[data-running] .campaign-links a[aria-current]:after,c4-hero-columns:has(>.campaign-columns>c4-slideshow[data-running]) .hero-dots a[aria-current]:after{animation:ring-fill var(--slide-interval, 7s) linear both}@keyframes ring-fill{0%{--ring: 0}to{--ring: 1}}c4-hero-columns[data-indicator=dots] .campaign-links a,.hero-dots a{height:24px}
/*# sourceMappingURL=/cdn/shop/t/34/assets/hero-columns.css.map */