.pezy-el-carousel{
--pezy-ink:#0e3a44;
--pezy-text:#1a1a28;
--pezy-muted:#5b5b63;
--pezy-line:#e6e6ea;
--pezy-card:#fff;
--pezy-soft:#f4f1ea;
--pezy-fill:rgba(14,58,68,.12);
--pezy-blue:#159cd8;
--pezy-carousel-rail:1200px;
--pezy-carousel-gap:18px;
position:relative !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
color:var(--pezy-text);
font-family:inherit;
box-sizing:border-box !important; overflow:visible !important;
}
.pezy-el-carousel *,
.pezy-el-carousel *::before,
.pezy-el-carousel *::after{ box-sizing:border-box !important; }
.pezy-el-carousel .pezy-dc__head{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:24px 40px !important;
width:100% !important;
max-width:var(--pezy-carousel-rail) !important;
min-width:0 !important;
margin:0 0 28px !important;
position:relative !important;
z-index:2 !important;
}
.pezy-el-carousel .pezy-dc__copy{
width:100% !important;
max-width:640px !important;
min-width:0 !important;
}
.pezy-el-carousel .pezy-dc__kicker{
margin:0 0 18px !important;
padding:0 !important;
font-size:13px !important;
font-weight:400 !important;
letter-spacing:.02em !important;
text-transform:none !important;
color:var(--pezy-ink) !important;
line-height:1.35 !important;
}
.pezy-el-carousel .pezy-dc__copy h2{
margin:0 0 .45em !important;
padding:0 !important;
color:var(--pezy-text) !important;
line-height:1.2 !important;
letter-spacing:-.02em;
}
.pezy-el-carousel .pezy-dc__lead{
margin:0 !important;
padding:0 !important;
max-width:min(52ch, 100%) !important;
color:#343231 !important;
font-size:16.5px !important;
line-height:1.55 !important;
overflow-wrap:break-word !important;
word-wrap:break-word !important;
}
.pezy-el-carousel .pezy-dc__nav{
display:flex !important;
gap:8px !important;
flex:0 0 auto !important;
margin:28px 0 0 !important;
position:relative !important;
z-index:5 !important;
pointer-events:auto !important;
}
.pezy-el-carousel .pezy-dc__nav .pezy-dc__btn{
pointer-events:auto !important;
}
.pezy-el-carousel .pezy-dc__btn{
width:42px !important;
height:42px !important;
padding:0 !important;
margin:0 !important;
border:1px solid var(--pezy-line) !important;
border-radius:999px !important;
background:#fff !important;
color:var(--pezy-ink) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
box-shadow:none !important;
outline:none !important;
transition:background .18s ease, border-color .18s ease, opacity .18s ease !important;
}
.pezy-el-carousel .pezy-dc__btn:hover{
background:var(--pezy-soft) !important;
border-color:#d5d5db !important;
}
.pezy-el-carousel .pezy-dc__btn:focus-visible{
box-shadow:0 0 0 3px rgba(21,156,216,.28) !important;
}
.pezy-el-carousel .pezy-dc__btn[disabled]{
opacity:.32 !important;
cursor:default !important;
background:#fff !important;
}
.pezy-el-carousel .pezy-dc__btn svg{
display:block;
width:16px;
height:16px;
}
.pezy-el-carousel .pezy-dc__viewport{
position:relative !important; width:calc(50% + 50vw) !important;
max-width:none !important;
overflow:hidden !important;
cursor:grab !important;
touch-action:pan-y !important;
}
.pezy-el-carousel.is-dragging .pezy-dc__viewport{
cursor:grabbing !important;
}
.pezy-el-carousel .pezy-dc__track{
position:relative !important;
display:flex !important;
flex-wrap:nowrap !important;
gap:var(--pezy-carousel-gap) !important;
width:max-content !important;
max-width:none !important;
margin:0 !important;
padding:0 2px 8px !important;
overflow:visible !important;
overflow-x:visible !important;
scroll-snap-type:none !important;
transform:translate3d(0,0,0);
transition:transform .45s cubic-bezier(.2,.7,.2,1);
will-change:transform;
cursor:inherit !important;
user-select:none !important;
-webkit-user-select:none !important;
-webkit-user-drag:none;
}
.pezy-el-carousel.is-dragging .pezy-dc__track{
transition:none !important;
}
.pezy-el-carousel .pezy-dc__track *,
.pezy-el-carousel .pezy-dc__card,
.pezy-el-carousel .pezy-dc__card *{
user-select:none !important;
-webkit-user-select:none !important;
-webkit-user-drag:none;
}
.pezy-el-carousel .pezy-dc__end-spacer{ display:none !important; }
.pezy-el-carousel .pezy-dc__card{ flex:0 0 auto !important;
max-width:560px !important;
width:min(560px, 42vw) !important;
background:var(--pezy-card) !important;
border:1px solid var(--pezy-line) !important;
border-radius:10px !important;
min-height:320px !important;
padding:0 !important;
margin:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1.15fr) minmax(120px,.85fr) !important;
overflow:hidden !important;
box-shadow:none !important;
}
.pezy-el-carousel .pezy-dc__body{
padding:32px 28px 30px 32px !important;
display:flex !important;
flex-direction:column !important;
min-width:0 !important;
}
.pezy-el-carousel .pezy-dc__step{
margin:0 0 14px !important;
font-size:13px !important;
font-weight:600 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:var(--pezy-blue) !important;
opacity:1 !important;
}
.pezy-el-carousel .pezy-dc__card h3{
margin:0 0 12px !important;
padding:0 !important;
font-size:26px !important;
line-height:1.22 !important;
font-weight:600 !important;
letter-spacing:-.025em;
color:var(--pezy-text) !important;
background:none !important;
border:0 !important;
}
.pezy-el-carousel .pezy-dc__card p{
margin:0 !important;
padding:0 !important;
font-size:16px !important;
line-height:1.55 !important;
color:#343231 !important;
max-width:38ch;
overflow:visible !important;
white-space:normal !important;
}
.pezy-el-carousel .pezy-dc__card .pezy-dc__step{
color:var(--pezy-blue) !important;
}
.pezy-el-carousel .pezy-dc__meta{
margin-top:auto !important;
padding-top:22px !important;
font-size:13px !important;
color:var(--pezy-muted) !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.pezy-el-carousel .pezy-dc__dots-inline{
display:flex !important;
gap:6px !important;
}
.pezy-el-carousel .pezy-dc__dots-inline i{
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:var(--pezy-line) !important;
display:block !important;
}
.pezy-el-carousel .pezy-dc__dots-inline i.is-on{
background:var(--pezy-ink) !important;
}
.pezy-el-carousel .pezy-dc__motif{
position:relative !important;
background:var(--pezy-soft) !important;
min-height:100% !important;
overflow:hidden !important;
}
.pezy-el-carousel .pezy-dc__box{
--rot:0deg;
--drift-x:3px;
--drift-y:-4px;
--from-x:10px;
--from-y:8px;
position:absolute !important;
box-sizing:border-box !important;
border:1.5px solid var(--pezy-ink) !important;
border-radius:10px !important;
pointer-events:none !important;
transform:rotate(var(--rot));
}
.pezy-el-carousel .pezy-dc__box:nth-child(1){ --drift-x:3px; --drift-y:-5px; --from-x:12px; --from-y:10px; }
.pezy-el-carousel .pezy-dc__box:nth-child(2){ --drift-x:-4px; --drift-y:3px; --from-x:-10px; --from-y:8px; }
.pezy-el-carousel .pezy-dc__box:nth-child(3){ --drift-x:4px; --drift-y:4px; --from-x:-8px; --from-y:-10px; }
.pezy-el-carousel .pezy-dc__box:nth-child(4){ --drift-x:-3px; --drift-y:-3px; --from-x:8px; --from-y:-6px; }
.pezy-el-carousel .pezy-dc__box.is-fill{ background:var(--pezy-fill) !important; }
.pezy-el-carousel .pezy-dc__box.is-solid{
background:var(--pezy-ink) !important;
border-color:var(--pezy-ink) !important;
}
.pezy-el-carousel.is-inview .pezy-dc__card.is-active .pezy-dc__box{
animation:
pezyMotifIn .7s cubic-bezier(.2,.75,.2,1) both,
pezyMotifDrift 6.5s ease-in-out infinite;
}
.pezy-el-carousel.is-inview .pezy-dc__card.is-active .pezy-dc__box:nth-child(1){ animation-delay:0s, .7s; }
.pezy-el-carousel.is-inview .pezy-dc__card.is-active .pezy-dc__box:nth-child(2){ animation-delay:.09s, .79s; }
.pezy-el-carousel.is-inview .pezy-dc__card.is-active .pezy-dc__box:nth-child(3){ animation-delay:.16s, .86s; }
.pezy-el-carousel.is-inview .pezy-dc__card.is-active .pezy-dc__box:nth-child(4){ animation-delay:.22s, .92s; }
@keyframes pezyMotifIn{
from{
opacity:.4;
transform:rotate(var(--rot)) scale(.88) translate(var(--from-x), var(--from-y));
}
to{
opacity:1;
transform:rotate(var(--rot)) scale(1) translate(0, 0);
}
}
@keyframes pezyMotifDrift{
0%, 100%{ transform:rotate(var(--rot)) translate(0, 0); }
50%{ transform:rotate(var(--rot)) translate(var(--drift-x), var(--drift-y)); }
}
.pezy-el-carousel .pezy-dc__mobile-nav{
display:none !important;
justify-content:center !important;
gap:8px !important;
margin:16px 0 0 !important;
padding:0 !important;
list-style:none !important;
}
.pezy-el-carousel .pezy-dc__mobile-nav button{
width:8px !important;
height:8px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:50% !important;
background:var(--pezy-line) !important;
cursor:pointer !important;
box-shadow:none !important;
}
.pezy-el-carousel .pezy-dc__mobile-nav button.is-on{
background:var(--pezy-ink) !important;
width:22px !important;
border-radius:99px !important;
}
@media (max-width: 900px){
.pezy-el-carousel{
overflow:hidden !important;
}
.pezy-el-carousel .pezy-dc__head{
flex-direction:column !important;
align-items:stretch !important;
gap:16px !important;
margin-bottom:20px !important;
max-width:none !important;
}
.pezy-el-carousel .pezy-dc__copy,
.pezy-el-carousel .pezy-dc__lead,
.pezy-el-carousel .pezy-dc__card p{
max-width:none !important;
}
.pezy-el-carousel .pezy-dc__nav{ display:none !important; }
.pezy-el-carousel .pezy-dc__mobile-nav{ display:flex !important; }
.pezy-el-carousel .pezy-dc__viewport{
width:100% !important;
}
.pezy-el-carousel .pezy-dc__card{
max-width:none !important;
grid-template-columns:1fr !important;
min-height:0 !important;
}
.pezy-el-carousel .pezy-dc__motif{ min-height:150px !important; }
.pezy-el-carousel .pezy-dc__body{ padding:26px 22px 24px !important; }
.pezy-el-carousel .pezy-dc__card h3{ font-size:22px !important; }
}
@media (max-width: 560px){
.pezy-el-carousel .pezy-dc__lead{ font-size:15.5px !important; }
}
@media (prefers-reduced-motion: reduce){
.pezy-el-carousel .pezy-dc__track{ transition:none !important; }
.pezy-el-carousel .pezy-dc__box{
animation:none !important;
transform:rotate(var(--rot)) !important;
}
}