/* ---------- portfolio grid ---------- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}

.pf .thumb {
  height: 190px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.pf .thumb svg {
  width: 100%;
  height: 100%;
  transition: transform .7s var(--ease);
}

.pf:hover .thumb svg {
  transform: scale(1.08);
}

.pf .body {
  padding: 24px;
}

.pf .meta {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pf .meta span {
  font-size: .62rem;
  letter-spacing: .08em;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(53, 109, 255, .1);
  color: #7FA0FF;
  font-weight: 500;
  text-transform: uppercase;
}

.pf .meta span.red {
  background: rgba(232, 67, 78, .1);
  color: #FF8A90;
}

.pf h3 {
  font-size: 1.06rem;
  margin-bottom: 8px;
}

.pf p {
  font-size: .84rem;
  color: var(--muted);
  margin-bottom: 16px;
}

.pf .lnk {
  font-size: .84rem;
  font-weight: 500;
  color: var(--cyan);
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.pf:hover .lnk .arr {
  transform: translateX(5px);
}

.pf .lnk .arr {
  transition: transform .3s;
}

/* ---------- responsive ---------- */
@media(max-width:1024px) {
  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:760px) {
  .pf-grid {
    grid-template-columns: 1fr;
  }
}