.spf-portfolio{--gap:16px;display:block}
.spf-portfolio.layout-grid .spf-grid{display:grid;grid-gap:var(--gap)}
.spf-portfolio.cols-d-1 .spf-grid{grid-template-columns:repeat(1,1fr)}
.spf-portfolio.cols-d-2 .spf-grid{grid-template-columns:repeat(2,1fr)}
.spf-portfolio.cols-d-3 .spf-grid{grid-template-columns:repeat(3,1fr)}
.spf-portfolio.cols-d-4 .spf-grid{grid-template-columns:repeat(4,1fr)}
.spf-portfolio.cols-d-5 .spf-grid{grid-template-columns:repeat(5,1fr)}
.spf-portfolio.cols-d-6 .spf-grid{grid-template-columns:repeat(6,1fr)}
@media(max-width:1024px){
    .spf-portfolio.cols-t-1 .spf-grid{grid-template-columns:repeat(1,1fr)}
    .spf-portfolio.cols-t-2 .spf-grid{grid-template-columns:repeat(2,1fr)}
    .spf-portfolio.cols-t-3 .spf-grid{grid-template-columns:repeat(3,1fr)}
    .spf-portfolio.cols-t-4 .spf-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:767px){
    .spf-portfolio.cols-m-1 .spf-grid{grid-template-columns:repeat(1,1fr)}
    .spf-portfolio.cols-m-2 .spf-grid{grid-template-columns:repeat(2,1fr)}
}
.spf-portfolio.layout-masonry .spf-grid{column-gap:var(--gap);}
.spf-portfolio.layout-masonry .spf-card{display:inline-block;width:100%;margin:0 0 var(--gap);break-inside:avoid}
.spf-portfolio.layout-masonry.cols-d-2 .spf-grid{columns:2}
.spf-portfolio.layout-masonry.cols-d-3 .spf-grid{columns:3}
.spf-portfolio.layout-masonry.cols-d-4 .spf-grid{columns:4}
.spf-portfolio.layout-masonry.cols-d-5 .spf-grid{columns:5}
.spf-portfolio.layout-masonry.cols-d-6 .spf-grid{columns:6}
@media(max-width:1024px){
    .spf-portfolio.layout-masonry.cols-t-1 .spf-grid{columns:1}
    .spf-portfolio.layout-masonry.cols-t-2 .spf-grid{columns:2}
    .spf-portfolio.layout-masonry.cols-t-3 .spf-grid{columns:3}
    .spf-portfolio.layout-masonry.cols-t-4 .spf-grid{columns:4}
}
@media(max-width:767px){
    .spf-portfolio.layout-masonry.cols-m-1 .spf-grid{columns:1}
    .spf-portfolio.layout-masonry.cols-m-2 .spf-grid{columns:2}
}
.spf-card{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
.spf-media{position:relative;overflow:hidden}
.spf-media .spf-media-inner{width:100%;height:100%;display:block}
.spf-media.ratio-1-1{aspect-ratio:1/1}
.spf-media.ratio-4-3{aspect-ratio:4/3}
.spf-media.ratio-3-2{aspect-ratio:3/2}
.spf-media.ratio-16-9{aspect-ratio:16/9}
.spf-media img{width:100%;height:100%;object-fit:cover;display:block}
.spf-body{padding:14px}
.spf-title{font-weight:600;margin:0 0 6px}
.spf-meta{font-size:0.9em;opacity:0.8;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:10px}
.spf-meta span{display:inline-flex;gap:6px;align-items:center}
.spf-button{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;border:1px solid #e5e7eb;background:#f8fafc}
.spf-notice{padding:10px;border:1px solid #e5e7eb;background:#fff}