.pf-nav { display: flex; justify-content: flex-end; gap: 12px; }
.pf-wrap { position: relative; margin-left: calc(50% - 50 * var(--cvw)); margin-right: calc(50% - 50 * var(--cvw)); }
.pf-track { --pf-inset: max(2rem, calc((100 * var(--cvw) - 1216px) / 2)); display: flex; gap: clamp(20px, 2.6 * var(--cvw), 48px); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px var(--pf-inset) 8px; scroll-padding-left: var(--pf-inset); cursor: grab; }
.pf-track::-webkit-scrollbar { display: none; }
.pf-track.is-grab { cursor: grabbing; }
.pf-card { flex: 0 0 auto; width: 78%; max-width: 360px; margin: 0; scroll-snap-align: start; }
@media (min-width: 640px) { .pf-card { width: 46%; } }
@media (min-width: 1024px) { .pf-card { width: 30%; } }
.pf-card__img { position: relative; display: block; height: auto; overflow: hidden; border-radius: 1.5rem; background: #fff; aspect-ratio: 4 / 5; }
.pf-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) and (pointer: fine) {
  .pf-card__img:hover img { transform: scale(1.04) translateZ(0); }
}
.pf-card__img:focus-visible img { transform: scale(1.04) translateZ(0); }
.pf-card__name { display: block; margin-top: 18px; font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: #1d4a4b; }
.pf-card__meta { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.5; color: #52525b; }
.pf-arrow { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(29,74,75,.22); border-radius: 9999px; color: #1d4a4b; transition: color .2s, border-color .2s, background-color .2s; }
.pf-arrow:hover { color: #fff; background: #1d4a4b; border-color: #1d4a4b; }
.pf-arrow:disabled { opacity: .35; cursor: default; }
.pf-arrow:disabled:hover { color: #1d4a4b; background: #fff; border-color: rgba(29,74,75,.22); }
.pf-arrow svg { width: 22px; height: 22px; }
@media (max-width: 767.98px) {
  .pf-track { --pf-inset: 1vw; }
}
html.reduce-motion .pf-card__img img { transition: none; }
html.reduce-motion .pf-card__img:hover img,
html.reduce-motion .pf-card__img:focus-visible img { transform: none; }