.fc_usps {
position: relative;
isolation: isolate;
.usps_container {
padding-block: calc(var(--padding-xxs) - 8px) calc(var(--padding-xxs) - 4px);
overflow: hidden;
display: flex; .the_usps {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: var(--gap-xxs);
flex-shrink: 0;
min-width: 100%;
animation: marquee 100s linear infinite;
.usp {
flex-shrink: 0;
p {
white-space: nowrap;
text-transform: lowercase;
line-height: 1.2;
backface-visibility: hidden;
.highlight {
color: currentColor;
}
}
&:nth-child(even) {
p {
color: var(--color-primary-pink);
}
}
}
&:hover {
cursor: default;
}
}
}
&::before {
content: "";
position: absolute;
inset: 50% 0 0 0;
background: currentColor;
}
&.above {
&::before {
inset: 0 0 50% 0;
}
}
&.below {
&::before {
inset: 50% 0 0 0;
}
} &.bg_white,
&.bg_black {
background: transparent;
}
&.bg_white {
color: var(--color-white);
}
&.bg_black {
color: var(--color-black);
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}