@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500&display=swap";.tattoo-steps{--ts-accent: #7FFF00;--ts-bg: #0b0b0b;--ts-card-w: 660px;--ts-card-h: 380px;--ts-gap: 20px;--ts-pad-x: 48px;--ts-font-title: "Bebas Neue", sans-serif;--ts-font-body: "DM Sans", sans-serif;background:var(--ts-bg);padding:80px 0;overflow:hidden}.tattoo-steps__header{display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--ts-pad-x) 40px}.tattoo-steps__title{font-family:var(--ts-font-title);font-size:clamp(2.2rem,4.5vw,3.8rem);letter-spacing:.04em;line-height:1;color:#fff;margin:0}.tattoo-steps__nav{display:flex;gap:10px}.tattoo-steps__nav-btn{width:46px;height:46px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,color .2s ease;padding:0}.tattoo-steps__nav-btn svg{width:18px;height:18px;fill:currentColor;pointer-events:none}.tattoo-steps__nav-btn:hover{background:var(--ts-accent);border-color:var(--ts-accent);color:#000}.tattoo-steps__track-wrap{padding-left:var(--ts-pad-x);overflow:hidden}.tattoo-steps__track{display:flex;gap:var(--ts-gap);transition:transform .55s cubic-bezier(.77,0,.18,1);will-change:transform}.tattoo-steps__card-media--mobile{display:none}.tattoo-steps__card-media--desktop{display:block}@media screen and (max-width:768px){.tattoo-steps__card-media--desktop{display:none}.tattoo-steps__card-media--mobile{display:block}}.tattoo-steps__card{position:relative;flex:0 0 var(--ts-card-w);height:var(--ts-card-h);overflow:hidden;border:1px solid rgba(255,255,255,.07);cursor:default}.tattoo-steps__card-media{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}.tattoo-steps__card-img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) brightness(.7);transition:filter .45s ease,transform .55s ease}.tattoo-steps__card:hover .tattoo-steps__card-img{filter:grayscale(75%) brightness(.88);transform:scale(1.04)}.tattoo-steps__card-media--placeholder{background:#1a1a1a}.tattoo-steps__card-media--placeholder .placeholder-svg{width:100%;height:100%;fill:#2a2a2a}.tattoo-steps__card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(155deg,#0000 25%,#000000bf);pointer-events:none;z-index:1}.tattoo-steps__card:before{content:"";position:absolute;top:0;left:0;width:3px;height:0;background:var(--ts-accent);z-index:3;transition:height .4s ease}.tattoo-steps__card:hover:before{height:100%}.tattoo-steps__card-content{position:absolute;bottom:0;left:0;right:0;padding:28px 30px 32px;z-index:2}.tattoo-steps__card-number{display:block;font-family:var(--ts-font-title);font-size:25px;letter-spacing:.14em;color:var(--ts-accent);margin-bottom:10px}.tattoo-steps__card-copy{font-family:var(--ts-font-body);font-size:20px;font-weight:300;line-height:1.6;color:#ffffffe6;max-width:400px;margin:0}.tattoo-steps__dots{display:flex;gap:8px;padding:28px var(--ts-pad-x) 0}.tattoo-steps__dot{width:28px;height:2px;background:#fff3;cursor:pointer;transition:background .3s ease,width .35s ease}.tattoo-steps__dot.is-active{background:var(--ts-accent);width:52px}@media screen and (max-width:768px){.tattoo-steps{--ts-pad-x: 20px;padding:48px 0 56px;overflow:visible}.tattoo-steps__nav,.tattoo-steps__dots{display:none}.tattoo-steps__header{padding:0 var(--ts-pad-x) 28px}.tattoo-steps__track-wrap{padding-left:0;overflow:visible}.tattoo-steps__track{flex-direction:column;gap:0;transform:none!important}.tattoo-steps__card{flex:none;width:100%;height:auto;display:flex;flex-direction:column;border:none;border-bottom:1px solid rgba(255,255,255,.06)}.tattoo-steps__card-media{position:relative;inset:auto;width:100%;height:260px;flex-shrink:0}.tattoo-steps__card-img{filter:grayscale(100%) brightness(.72)}.tattoo-steps__card:after{display:none}.tattoo-steps__card:before{display:none}.tattoo-steps__card-content{position:static;padding:20px var(--ts-pad-x) 28px;background:var(--ts-bg)}.tattoo-steps__card-number{font-size:20px;margin-bottom:8px}.tattoo-steps__card-copy{font-size:15px;max-width:100%;color:#ffffffd1}}@media(prefers-reduced-motion:reduce){.tattoo-steps__track,.tattoo-steps__card-img{transition:none}.tattoo-steps__card:before{transition:none}.tattoo-steps__dot{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/tattoo-steps.css.map */