.pezy-el-grid{
--pezy-ink:#0e3a44;
--pezy-blue:#159cd8;
--pezy-line:#e6e6ea;
--pezy-soft:#f4f1ea;
--pezy-fill:rgba(14,58,68,.12);
position:relative !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
overflow:visible !important;
transform:none !important;
}
.pezy-el-grid *,
.pezy-el-grid *::before,
.pezy-el-grid *::after{ box-sizing:border-box; }
.pezy-el-grid .pezy-pains__head{
margin:0 0 28px;
max-width:50%;
}
.pezy-el-grid .pezy-pains__head h2{
margin:0 !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:var(--pezy-ink) !important;
line-height:1.2 !important;
letter-spacing:-.03em;
}
.pezy-el-grid .pezy-pains__grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:1px !important;
background:var(--pezy-line) !important;
border:1px solid var(--pezy-line) !important;
border-radius:16px !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
}
.pezy-el-grid .pezy-pains__item{
position:relative !important;
z-index:0;
background:#fff !important;
padding:28px 26px 30px !important;
margin:0 !important;
min-width:0 !important;
min-height:100%;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
overflow:hidden !important;
transform:none !important;
transition:background .22s ease !important;
}
.pezy-el-grid .pezy-pains__item:hover{
background:var(--pezy-soft) !important;
}
.pezy-el-grid .pezy-pains__icon{
width:36px;
height:36px;
margin:0 0 4px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
border-radius:10px;
color:var(--pezy-ink);
background:transparent;
position:relative;
z-index:1;
transition:color .22s ease, background .22s ease, transform .22s ease;
}
.pezy-el-grid .pezy-pains__icon svg{
display:block;
width:20px;
height:20px;
transition:transform .22s ease;
}
.pezy-el-grid .pezy-pains__item:hover .pezy-pains__icon{
color:var(--pezy-blue);
background:rgba(21,156,216,.1);
transform:translateY(-1px);
}
.pezy-el-grid .pezy-pains__item:hover .pezy-pains__icon svg{
transform:scale(1.04);
}
.pezy-el-grid .pezy-pains__item h3{
margin:0 !important;
padding:0 !important;
border:0 !important;
background:none !important;
position:relative;
z-index:1;
}
.pezy-el-grid .pezy-pains__item p{
margin:0 !important;
padding:0 !important;
position:relative;
z-index:1;
color:#343231 !important;
}
.pezy-el-grid .pezy-pains__motif{
position:absolute !important;
right:8px;
bottom:8px;
width:34%;
height:38%;
z-index:0;
pointer-events:none;
opacity:.1;
transition:opacity .28s ease;
}
.pezy-el-grid .pezy-pains__item.has-motif:hover .pezy-pains__motif{
opacity:.28;
}
.pezy-el-grid .pezy-dc__box{
--rot:0deg;
--drift-x:2px;
--drift-y:-2px;
position:absolute !important;
box-sizing:border-box !important;
border:1.25px solid var(--pezy-ink) !important;
border-radius:8px !important;
pointer-events:none !important;
transform:rotate(var(--rot));
}
.pezy-el-grid .pezy-dc__box:nth-child(1){ --drift-x:2px; --drift-y:-3px; }
.pezy-el-grid .pezy-dc__box:nth-child(2){ --drift-x:-2px; --drift-y:2px; }
.pezy-el-grid .pezy-dc__box:nth-child(3){ --drift-x:2px; --drift-y:2px; }
.pezy-el-grid .pezy-dc__box:nth-child(4){ --drift-x:-2px; --drift-y:-2px; }
.pezy-el-grid .pezy-dc__box.is-fill{ background:var(--pezy-fill) !important; }
.pezy-el-grid .pezy-dc__box.is-solid{
background:var(--pezy-fill) !important;
border-color:var(--pezy-ink) !important;
}
.pezy-el-grid .pezy-pains__item.has-motif:hover .pezy-dc__box{
animation:pezyPainsDrift 4s ease-in-out infinite;
}
.pezy-el-grid .pezy-pains__item.has-motif:hover .pezy-dc__box:nth-child(1){ animation-delay:0s; }
.pezy-el-grid .pezy-pains__item.has-motif:hover .pezy-dc__box:nth-child(2){ animation-delay:.08s; }
.pezy-el-grid .pezy-pains__item.has-motif:hover .pezy-dc__box:nth-child(3){ animation-delay:.14s; }
.pezy-el-grid .pezy-pains__item.has-motif:hover .pezy-dc__box:nth-child(4){ animation-delay:.2s; }
@keyframes pezyPainsDrift{
0%, 100%{ transform:rotate(var(--rot)) translate(0, 0); }
50%{ transform:rotate(var(--rot)) translate(var(--drift-x), var(--drift-y)); }
}
@media (max-width:1024px){
.pezy-el-grid .pezy-pains__head{ max-width:none; }
.pezy-el-grid .pezy-pains__item,
.pezy-el-grid .pezy-pains__item h3,
.pezy-el-grid .pezy-pains__item p{
overflow:visible !important;
white-space:normal !important;
text-overflow:unset !important;
}
.pezy-el-grid .pezy-pains__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:640px){
.pezy-el-grid .pezy-pains__head{ margin-bottom:20px; max-width:none; }
.pezy-el-grid .pezy-pains__grid{ grid-template-columns:1fr !important; }
.pezy-el-grid .pezy-pains__item{ padding:22px 20px !important; }
.pezy-el-grid .pezy-pains__motif{
width:28%;
height:32%;
opacity:.08;
}
}
@media (prefers-reduced-motion: reduce){
.pezy-el-grid .pezy-pains__item,
.pezy-el-grid .pezy-pains__icon,
.pezy-el-grid .pezy-pains__icon svg,
.pezy-el-grid .pezy-pains__motif{
transition:none !important;
}
.pezy-el-grid .pezy-dc__box{
animation:none !important;
transform:rotate(var(--rot)) !important;
}
}