.feature-strip{
position:relative;
overflow:hidden;
padding:38px 0; background:
radial-gradient(circle at 50% 0%, rgba(212,175,55,.08), transparent 70%),
linear-gradient(180deg,#121214 0%,#0a0a0c 100%);
} .feature-strip::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:1px;
background:
linear-gradient(90deg,
transparent,
rgba(212,175,55,.8),
transparent);
} .feature-strip::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background:
linear-gradient(90deg,
transparent,
rgba(212,175,55,.8),
transparent);
} .feature-strip__viewport{
overflow:hidden;
width:100%;
}
.feature-strip__track{
display:flex;
flex-wrap:nowrap; align-items:center;
gap:70px;
width:max-content;
white-space:nowrap;
}
.feature-strip__item{
display:inline-flex; align-items:center;
gap:1px;
flex:0 0 auto;
white-space:nowrap;
}
.feature-strip__text{
white-space:nowrap;
}
.feature-strip__svg{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:999px;
background:linear-gradient(
180deg,
#fff6cc 0%,
#f0d97a 20%,
#d4af37 45%,
#f7e8a8 65%,
#b8922c 100%
);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
}
.feature-strip__svg svg{
display:block;
width:100%;
height:100%; fill:#000;
stroke:#000;
} .feature-strip__img{
width:28px;
height:auto;
}
.feature-strip__text{
font-family:"Space Grotesk", sans-serif;
font-weight:500;
font-size:14px;
letter-spacing:.06em;
background:linear-gradient(
180deg,
#fff3c4 0%,
#e8c86a 25%,
#d4af37 50%,
#f6e7a3 75%,
#b8962e 100%
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:
0 1px 0 rgba(255,255,255,.15),
0 0 12px rgba(212,175,55,.2);
} @media(min-width:1024px){
.feature-strip{
padding:30px 0;
}
.feature-strip__track{
gap:110px;
}
.feature-strip__svg svg{
width:32px;
height:32px;
}
.feature-strip__text{
font-size:15px;
}
} @media(max-width:768px){
.feature-strip{
padding:24px 0;
}
.feature-strip__track{
gap:50px;
}
.feature-strip__svg svg{
width:24px;
height:24px;
}
.feature-strip__text{
font-size:13px;
}
} .feature-strip__item:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:26px;
background:linear-gradient(
180deg,
transparent,
rgba(212,175,55,.8),
transparent
);
}  :root{
--feature-strip-speed: 30s; } .feature-strip__track{
animation: vl24FeatureMove var(--feature-strip-speed) linear infinite;
will-change: transform;
} .feature-strip:hover .feature-strip__track{
animation-play-state: paused;
} @keyframes vl24FeatureMove{
from{ transform:translateX(0); }
to{ transform:translateX(-2000px); } }