.adlbp-wrap {
--adlbp-bg: #f7f7f7;
--adlbp-radius: 10px;
--adlbp-logo-h: 44px;
--adlbp-logo-h-mobile: 30px;
--adlbp-gap: 64px;
--adlbp-speed: 34s;
--adlbp-max-width: 1600px;
--adlbp-loop-distance: -50%;
--adlbp-edge-opacity: .65;
--adlbp-edge-width: 96px;
--adlbp-edge-softness: 100%;
width: 100%;
margin: 0 auto;
}
.adlbp-inner {
max-width: min(100%, var(--adlbp-max-width));
margin: 0 auto;
background: var(--adlbp-bg);
border-radius: var(--adlbp-radius);
overflow: hidden;
padding: 34px 44px;
position: relative;
}
.adlbp-slider {
overflow: hidden;
position: relative;
}
.adlbp-slider::before,
.adlbp-slider::after {
content: '';
position: absolute;
top: 0;
width: var(--adlbp-edge-width);
height: 100%;
z-index: 2;
pointer-events: none;
opacity: var(--adlbp-edge-opacity);
}
.adlbp-slider::before {
left: 0;
}
.adlbp-slider::after {
right: 0;
}
.adlbp-edge-clean .adlbp-slider::before,
.adlbp-edge-clean .adlbp-slider::after,
.adlbp-layout-grid .adlbp-slider::before,
.adlbp-layout-grid .adlbp-slider::after {
display: none;
}
.adlbp-edge-soft-fade .adlbp-slider::before {
background: linear-gradient(to right, var(--adlbp-bg) 0%, rgba(255,255,255,0) var(--adlbp-edge-softness));
}
.adlbp-edge-soft-fade .adlbp-slider::after {
background: linear-gradient(to left, var(--adlbp-bg) 0%, rgba(255,255,255,0) var(--adlbp-edge-softness));
}
.adlbp-edge-luxury-fade .adlbp-slider::before {
background:
linear-gradient(to right, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 58%),
linear-gradient(to right, var(--adlbp-bg) 0%, rgba(255,255,255,0) 100%);
}
.adlbp-edge-luxury-fade .adlbp-slider::after {
background:
linear-gradient(to left, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 58%),
linear-gradient(to left, var(--adlbp-bg) 0%, rgba(255,255,255,0) 100%);
}
.adlbp-edge-spotlight .adlbp-slider::before {
background:
linear-gradient(to right, var(--adlbp-bg) 0%, rgba(255,255,255,0) 100%),
radial-gradient(circle at left center, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%);
}
.adlbp-edge-spotlight .adlbp-slider::after {
background:
linear-gradient(to left, var(--adlbp-bg) 0%, rgba(255,255,255,0) 100%),
radial-gradient(circle at right center, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%);
}
.adlbp-edge-tunnel-soft .adlbp-slider::before {
background:
linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 35%),
linear-gradient(to right, var(--adlbp-bg) 0%, rgba(255,255,255,0) 100%);
}
.adlbp-edge-tunnel-soft .adlbp-slider::after {
background:
linear-gradient(to left, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 35%),
linear-gradient(to left, var(--adlbp-bg) 0%, rgba(255,255,255,0) 100%);
}
.adlbp-intensity-subtle {
--adlbp-edge-opacity: .38;
--adlbp-edge-width: 74px;
}
.adlbp-intensity-medium {
--adlbp-edge-opacity: .62;
--adlbp-edge-width: 96px;
}
.adlbp-intensity-strong {
--adlbp-edge-opacity: .84;
--adlbp-edge-width: 128px;
}
.adlbp-track {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
width: max-content;
will-change: transform;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.adlbp-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--adlbp-gap);
flex: 0 0 auto;
min-width: max-content;
}
.adlbp-group-clone {
margin-left: var(--adlbp-gap);
}
.adlbp-autoplay .adlbp-track.adlbp-is-ready {
animation: adlbp-marquee var(--adlbp-speed) linear infinite;
}
.adlbp-no-autoplay .adlbp-track,
.adlbp-autoplay .adlbp-track:not(.adlbp-is-ready) {
animation: none;
}
.adlbp-pause-hover:hover .adlbp-track {
animation-play-state: paused;
}
.adlbp-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 24px var(--adlbp-gap);
}
.adlbp-item {
--adlbp-item-width: auto;
--adlbp-item-height: var(--adlbp-logo-h);
--adlbp-item-width-mobile: auto;
--adlbp-item-height-mobile: var(--adlbp-logo-h-mobile);
flex: 0 0 auto;
}
.adlbp-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 120px;
min-height: calc(var(--adlbp-item-height) + 12px);
text-decoration: none;
}
.adlbp-logo {
display: block;
width: var(--adlbp-item-width);
max-width: min(320px, 24vw);
height: var(--adlbp-item-height);
max-height: var(--adlbp-item-height);
object-fit: contain;
transition: transform .28s ease, opacity .28s ease, filter .28s ease;
flex: 0 0 auto;
}
.adlbp-item[style*="--adlbp-item-width"] .adlbp-logo {
max-width: none;
}
.adlbp-has-grayscale .adlbp-logo {
filter: grayscale(100%);
opacity: .9;
}
.adlbp-has-hover .adlbp-link:hover .adlbp-logo,
.adlbp-has-hover .adlbp-link:focus .adlbp-logo {
transform: translateY(-1px) scale(1.02);
}
.adlbp-has-grayscale.adlbp-has-hover .adlbp-link:hover .adlbp-logo,
.adlbp-has-grayscale.adlbp-has-hover .adlbp-link:focus .adlbp-logo {
filter: grayscale(0%);
opacity: 1;
}
@keyframes adlbp-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(var(--adlbp-loop-distance), 0, 0);
}
}
@media (max-width: 1024px) {
.adlbp-inner {
padding: 28px 28px;
}
.adlbp-intensity-subtle,
.adlbp-intensity-medium,
.adlbp-intensity-strong {
--adlbp-edge-width: 56px;
}
.adlbp-logo {
max-width: min(260px, 30vw);
}
}
@media (max-width: 767px) {
.adlbp-inner {
padding: 18px 14px;
}
.adlbp-slider::before,
.adlbp-slider::after {
width: 28px;
}
.adlbp-group,
.adlbp-grid {
gap: 18px 26px;
}
.adlbp-group-clone {
margin-left: 26px;
}
.adlbp-link {
min-width: 84px;
min-height: calc(var(--adlbp-item-height-mobile) + 6px);
}
.adlbp-logo {
width: var(--adlbp-item-width-mobile, auto);
max-width: min(180px, 38vw);
height: var(--adlbp-item-height-mobile);
max-height: var(--adlbp-item-height-mobile);
}
.adlbp-item[style*="--adlbp-item-width-mobile"] .adlbp-logo {
max-width: none;
}
.adlbp-edge-clean .adlbp-slider::before,
.adlbp-edge-clean .adlbp-slider::after,
.adlbp-intensity-subtle .adlbp-slider::before,
.adlbp-intensity-subtle .adlbp-slider::after {
display: none;
}
}