.portfolio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}

/* Модификатор: ровно 4 колонки */
.portfolio-grid--4{grid-template-columns:repeat(4,1fr)}

.portfolio-grid a{display:block;overflow:hidden;aspect-ratio:1/1;background:var(--bg-2);position:relative;cursor:pointer}
.portfolio-grid a::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,162,94,.25),rgba(9,12,13,.55));opacity:0;transition:opacity .5s ease;pointer-events:none}
.portfolio-grid a::before{content:'';position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%) scale(.5);background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1);z-index:2;pointer-events:none}
.portfolio-grid a:hover::after{opacity:1}
.portfolio-grid a:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}
.portfolio-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);display:block}
.portfolio-grid a:hover img{transform:scale(1.1)}

@media (max-width:1180px){
  .portfolio-grid{grid-template-columns:repeat(4,1fr)}
  .portfolio-grid--4{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:940px){
  .portfolio-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .portfolio-grid--4{grid-template-columns:repeat(2,1fr);gap:8px}
}
@media (max-width:480px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .portfolio-grid--4{grid-template-columns:repeat(2,1fr);gap:8px}
}