/* Портфолио — 522:8549: фон #f7f7f7, отступы 100/110, квадраты 550, промежуток 25 */
.pf {
  background: var(--paper);
  padding-block: clamp(56px, 5.2083vw, 100px);
  padding-inline: var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.125vw, 60px);
}
.pf__head { display: flex; flex-direction: column; gap: 20px; padding-inline-end: var(--gutter); }
.pf__title {
  font-size: clamp(30px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--ink);
}
.pf__sub {
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--ink);
}

.pf__track {
  display: flex;
  gap: clamp(16px, 1.3021vw, 25px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pf__track::-webkit-scrollbar { display: none; }
.pf__track::after { content: ""; flex: 0 0 var(--gutter); }

.pf__item {
  position: relative;
  flex: 0 0 clamp(260px, 28.6458vw, 550px);
  aspect-ratio: 1;
  scroll-snap-align: start;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.pf__item img { width: 100%; height: 100%; object-fit: cover; }
/* два кадра в макете подрезаны вручную (683:28300 и 522:8556) */
.pf__item--crop3 img {
  position: absolute;
  left: -59.71%;
  top: -26.48%;
  width: 208.42%;
  height: 156.32%;
  max-width: none;
  object-fit: cover;
}
.pf__item--crop5 img {
  position: absolute;
  left: -45.67%;
  top: -0.08%;
  width: 177.68%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.pf__bars { display: flex; gap: 10px; }
.pf__bars span { width: 40px; height: 5px; border-radius: var(--r-xl); background: var(--ink); }

@media (max-width: 599px) { .pf { padding-block: 56px; } }