:root{}
.psl-portfolio{width:100%;}

/* GRID LAYOUT */
.psl-portfolio[data-layout="grid"] .psl-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols-desktop,4), minmax(0,1fr));
  gap:var(--gap-desktop,16px);
}
@media (max-width:1200px){
  .psl-portfolio[data-layout="grid"] .psl-grid{
    grid-template-columns:repeat(var(--cols-laptop, var(--cols-desktop,4)), minmax(0,1fr));
    gap:var(--gap-laptop, var(--gap-desktop,16px));
  }
}
@media (max-width:992px){
  .psl-portfolio[data-layout="grid"] .psl-grid{
    grid-template-columns:repeat(var(--cols-tablet,2), minmax(0,1fr));
    gap:var(--gap-tablet, var(--gap-laptop,16px));
  }
}
@media (max-width:767px){
  .psl-portfolio[data-layout="grid"] .psl-grid{
    grid-template-columns:repeat(var(--cols-mobile,1), minmax(0,1fr));
    gap:var(--gap-mobile, var(--gap-tablet,14px));
  }
}

/* FLEX LAYOUT */
.psl-portfolio[data-layout="flex"] .psl-grid{ display:flex; flex-wrap:wrap; gap:var(--gap-desktop,16px); }
.psl-portfolio[data-layout="flex"] .psl-cell{ width:calc((100% - (var(--gap-desktop,16px) * (var(--cols-desktop,4) - 1))) / var(--cols-desktop,4)); }
@media (max-width:1200px){
  .psl-portfolio[data-layout="flex"] .psl-grid{ gap:var(--gap-laptop, var(--gap-desktop,16px)); }
  .psl-portfolio[data-layout="flex"] .psl-cell{ width:calc((100% - (var(--gap-laptop,16px) * (var(--cols-laptop, var(--cols-desktop,4)) - 1))) / var(--cols-laptop, var(--cols-desktop,4))); }
}
@media (max-width:992px){
  .psl-portfolio[data-layout="flex"] .psl-grid{ gap:var(--gap-tablet, var(--gap-laptop,16px)); }
  .psl-portfolio[data-layout="flex"] .psl-cell{ width:calc((100% - (var(--gap-tablet,14px) * (var(--cols-tablet,2) - 1))) / var(--cols-tablet,2)); }
}
@media (max-width:767px){
  .psl-portfolio[data-layout="flex"] .psl-grid{ gap:var(--gap-mobile, var(--gap-tablet,14px)); }
  .psl-portfolio[data-layout="flex"] .psl-cell{ width:calc((100% - (var(--gap-mobile,12px) * (var(--cols-mobile,1) - 1))) / var(--cols-mobile,1)); }
}

.psl-portfolio .psl-cell{ position:relative; overflow:hidden; }
.psl-portfolio .psl-card{
  position:relative;
  height:var(--height-desktop,320px);
  overflow:hidden;
  background:#0f1113;
  color:#fff;
}
@media (max-width:1200px){ .psl-portfolio .psl-card{ height:var(--height-laptop, var(--height-desktop,320px)); } }
@media (max-width:992px){ .psl-portfolio .psl-card{ height:var(--height-tablet,260px); } }
@media (max-width:767px){ .psl-portfolio .psl-card{ height:var(--height-mobile,220px); } }

.psl-portfolio .psl-img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); }
.psl-portfolio .psl-overlay{ position:absolute; inset:0; pointer-events:none; }

.psl-portfolio .psl-meta{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.75) 100%);
}
.psl-portfolio .psl-title{ font-weight:700; line-height:1.2; }
.psl-portfolio .psl-subtitle{ opacity:.85; font-size:.95em; }
.psl-portfolio .psl-actions{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.psl-portfolio .psl-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:8px; text-decoration:none; font-weight:600; transition:.25s ease; }
.psl-portfolio .psl-btn-icon{ position:relative; }
.psl-portfolio .psl-btn-icon::before{
  content:""; position:absolute; inset:0; margin:auto; background:#111;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m18.541 10.894-4.717-4.717-.707.707 4.616 4.617H5v1h12.735l-4.618 4.617.707.707 4.717-4.716c.296-.296.459-.69.459-1.108s-.163-.812-.459-1.106Z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m18.541 10.894-4.717-4.717-.707.707 4.616 4.617H5v1h12.735l-4.618 4.617.707.707 4.717-4.716c.296-.296.459-.69.459-1.108s-.163-.812-.459-1.106Z"/></svg>') center/contain no-repeat;
}