.usp_strip {
background: var(--ink);
color: var(--white); &.bg_light {
background: #B9A7A0;
& .usp_strip_icon .usp_icon {
color: var(--white);
}
}
& > .container {
padding-top: 40px;
padding-bottom: 40px;
}
& .usp_strip_list {
list-style: none !important;
margin: 0;
padding-left: 0 !important;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
& .usp_strip_item {
margin: 0 !important;
display: flex;
align-items: center;
gap: 14px;
}
& .usp_strip_icon {
flex: none;
display: inline-flex;
& .usp_icon {
width: 30px;
height: 30px;
color: var(--rose);
}
}
& .usp_strip_label {
display: block;
font-weight: 700;
font-size: 14px;
line-height: 1.3;
letter-spacing: .02em;
color: var(--white);
}
& .usp_strip_sub {
display: block;
font-size: 13px;
line-height: 1.4;
color: rgba(255, 255, 255, .7);
}
@media (max-width: 991px) {
& .usp_strip_list {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 560px) {
& .usp_strip_list {
grid-template-columns: 1fr;
}
}
}.brand_marquee {
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding-top: 34px;
padding-bottom: 34px;
& .brand_marquee_track {
display: flex;
align-items: center;
gap: clamp(40px, 7vw, 90px);
width: max-content;
animation: brand_marquee_scroll 32s linear infinite;
}
& .brand_marquee_item {
font-family: "Belleza", serif;
font-size: clamp(22px, 3vw, 34px);
letter-spacing: .04em;
color: #b3a9a3;
white-space: nowrap;
} & .brand_marquee_item.has_logo {
display: inline-flex;
align-items: center;
height: clamp(28px, 3vw, 40px);
& .brand_marquee_logo {
height: 100%;
width: auto;
max-width: 160px;
object-fit: contain;
filter: grayscale(1) opacity(.55);
transition: filter .3s var(--ease);
}
&:hover .brand_marquee_logo {
filter: grayscale(0) opacity(1);
}
} &:hover .brand_marquee_track {
animation-play-state: paused;
}
}
@keyframes brand_marquee_scroll {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.brand_marquee .brand_marquee_track {
animation: none;
flex-wrap: wrap;
justify-content: center;
width: auto;
gap: clamp(24px, 5vw, 60px);
}
}