/* ==========================================================================
   SAN Media Solution — Our Work (projects.html)
   The portfolio by type of work, in the site's own system: the header from
   hero.css, cream and white grounds, the ink and lime of the Clients section,
   Inter for everything. Each type reads top down — its number and name, the
   brands it was made for, then the work itself in a row that scrolls
   sideways: reels that play, muted, while they are on screen; posters that
   open large. Fluid, not an artboard: rems and clamps, so it re-flows on
   every width.
   ========================================================================== */

.pf-body {
  margin: 0;
  background: #fbf8f5;
  color: #111;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.pf-body .u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-body .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: #111; color: #fff; border-radius: 8px; }
.pf-body .skip:focus { top: 12px; }

/* the header: hero.css draws it; here it is always frosted and its opening
   states never apply (there is no opening on this page) */
.pf-bar [data-reveal], .pf-bar .nav__ul { opacity: 1; }
.pf-bar .brand__mark { display: block; }
.pf-bar .nav a.is-current::after { content: ""; position: absolute; left: 27%; right: 27%; bottom: -.9em; height: 3px; border-radius: 2px; background: var(--lime); }
@media (max-width: 1080px) { .pf-bar .nav a.is-current::after { display: none; } }

/* ── shared ────────────────────────────────────────────────────────────── */
.pf { padding-top: calc(94 * var(--u)); }
@media (max-width: 1080px) { .pf { padding-top: clamp(64px, 12vw, 94px); } }
.pf-wrap { width: min(100% - clamp(40px, 6vw, 96px), 1400px); margin: 0 auto; }
.pf-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(10.5px, .8vw, 12px); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; line-height: 1; color: #5b5f66; white-space: nowrap; }
.pf-kicker i { display: block; width: 36px; height: 1.5px; background: #43cc05; }
.pf a { color: inherit; }

/* ── the opening ───────────────────────────────────────────────────────── */
.pf-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(36px, 4vw, 56px); background: #f7f3ee; }
/* the way back: to where the reader came from (projects.js), or the home
   page's Clients section */
.pf-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 clamp(18px, 2.4vw, 30px); padding: 0 18px 0 14px; border: 1px solid #dad7d1; border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: #111; transition: border-color .3s, transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.pf-back svg { width: 18px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pf-back:hover, .pf-back:focus-visible { border-color: #111; transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
.pf-back:hover svg, .pf-back:focus-visible svg { transform: translateX(-4px); }
.pf-back:active { transform: translateY(0) scale(.97); box-shadow: none; }
.pf-back:focus-visible { outline: 2px solid #43cc05; outline-offset: 3px; }
.pf-title { margin: 22px 0 0; font-size: clamp(44px, 7.4vw, 108px); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; color: #0a0a0a; }
.pf-title span { display: block; }
.pf-title em { font-style: normal; color: #43cc05; }
.pf-lede { max-width: 58ch; margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45; letter-spacing: -.01em; color: #565a63; }
.pf-kpis { display: flex; flex-wrap: wrap; gap: 16px 0; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.pf-kpis li { padding-right: 28px; margin-right: 28px; border-right: 1px solid #cfcfd2; }
.pf-kpis li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pf-kpis b { display: block; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #070707; }
.pf-kpis span { display: block; margin-top: 8px; font-size: clamp(12.5px, 1vw, 15px); color: #6c6e76; }
.pf-index { margin-top: clamp(28px, 3.4vw, 48px); }
.pf-index ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-index a { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border: 1px solid #dad7d1; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; color: #111; transition: border-color .3s, transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.pf-index a b { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #43cc05; font-variant-numeric: tabular-nums; }
.pf-index a:hover, .pf-index a:focus-visible { border-color: #111; transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
.pf-index a:focus-visible { outline: 2px solid #43cc05; outline-offset: 3px; }

/* ── one type of work ──────────────────────────────────────────────────── */
.wt { padding: clamp(44px, 5.6vw, 84px) 0 clamp(40px, 5vw, 72px); border-top: 1px solid #ebe7e1; scroll-margin-top: calc(94 * var(--u) + 12px); }
.wt:nth-of-type(even) { background: #fff; }
.wt__head { display: grid; grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: end; }
.wt__n { margin: 0; align-self: start; font-size: clamp(44px, 5.2vw, 76px); font-weight: 800; line-height: .8; letter-spacing: -.05em; color: #d9d3c9; font-variant-numeric: tabular-nums; }
.wt:nth-of-type(even) .wt__n { color: #e4dfd7; }
.wt__copy { min-width: 0; }
.wt__title { margin: 16px 0 0; font-size: clamp(28px, 3.4vw, 50px); font-weight: 800; line-height: .98; letter-spacing: -.035em; text-transform: uppercase; color: #0a0a0a; }
.wt__title em { font-style: normal; color: #43cc05; }
.wt__lede { max-width: 58ch; margin: 14px 0 0; font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.5; letter-spacing: -.01em; color: #565a63; }
/* the brands the work was made for: marks from the client library, or a name
   set in type where no mark was delivered — never a drawn stand-in */
.wt__brands { justify-self: end; max-width: 100%; }
.wt__label { margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #6c6e76; }
.wt__logos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wt__logos li { display: grid; place-items: center; min-height: 64px; padding: 8px 16px; border: 1px solid #e6e1d9; border-radius: 14px; background: #fff; }
.wt:nth-of-type(even) .wt__logos li { background: #fbf8f5; }
.wt__logo { display: block; width: auto; height: auto; max-width: 150px; max-height: 52px; object-fit: contain; }
.wt__logo.is-tile { border-radius: 8px; }
.wt__word { display: grid; text-align: center; }
.wt__word b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: #0a0a0a; white-space: nowrap; }
.wt__word span { margin-top: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6c6e76; white-space: nowrap; }

/* the row of work */
.wt__work { margin-top: clamp(24px, 3vw, 40px); }
.pf-group__bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wt__count { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #111; font-variant-numeric: tabular-nums; }
.pf-rail__nav { margin-left: auto; display: flex; gap: 8px; }
.pf-rail__nav[hidden] { display: none; }   /* a rail with nothing to scroll shows no arrows (projects.js sets `hidden`) */
.pf-rail__btn, .pf-light__nav, .pf-light__close {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0;
  border: 1px solid #c9c9cc; border-radius: 50%; background: transparent; color: #111; cursor: pointer;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s, border-color .3s, opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
.pf-rail__btn svg, .pf-light__nav svg, .pf-light__close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-rail__btn:hover, .pf-rail__btn:focus-visible { transform: scale(1.08); border-color: #111; background: #fff; }
.pf-rail__btn:focus-visible, .pf-light__nav:focus-visible, .pf-light__close:focus-visible { outline: 2px solid #43cc05; outline-offset: 3px; }
.pf-rail__btn[disabled] { opacity: .35; cursor: default; transform: none; }

.pf-rail { display: flex; gap: clamp(12px, 1.3vw, 18px); margin: 0; padding: 4px 0 14px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pf-rail::-webkit-scrollbar { display: none; }
.pf-rail > li { flex: 0 0 auto; scroll-snap-align: start; }

/* one piece of work: a reel that plays in its frame, or a poster */
.wt-item { --card-w: clamp(210px, 18.4vw, 276px); width: var(--card-w); }
.wt-item--wide { --card-w: clamp(320px, 44vw, 600px); }
.wt-item--poster { --card-w: clamp(196px, 17vw, 246px); }
.wt-item__play { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; margin: 0; border: 0; border-radius: 18px; overflow: hidden; background: #111; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s; }
.wt-item--wide .wt-item__play { aspect-ratio: 16 / 9; }
.wt-item--poster .wt-item__play { aspect-ratio: 4 / 5; background: #e9e5df; }
.wt-item__poster, .wt-item__video, .wt-item__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wt-item__video { background: transparent; }   /* the lazy poster shows through until the reel plays */
/* the play mark: never over a reel that is playing on its own. It appears
   under the pointer (the card opens large), on the keyboard's focus, and
   on any frame whose reel could not start (a phone in low-power mode) */
.wt-item__glyph { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; translate: -50% -50%; opacity: 0; transform: scale(.8); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s, opacity .4s; }
.wt-item__glyph svg { width: 20px; height: 20px; fill: currentColor; translate: 8% 0; }
.wt-item.is-still .wt-item__glyph, .wt-item__play:hover .wt-item__glyph, .wt-item__play:focus-visible .wt-item__glyph { opacity: 1; transform: scale(1); }
@media (hover: none) { .wt-item__play:hover .wt-item__glyph { opacity: 0; transform: scale(.8); } .wt-item.is-still .wt-item__glyph { opacity: 1; transform: scale(1); } }
.wt-item__time { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 5px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wt-item__play:hover, .wt-item__play:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .45); }
.wt-item__play:hover .wt-item__glyph, .wt-item__play:focus-visible .wt-item__glyph { background: #98f014; }
.wt-item__play:focus-visible { outline: 2px solid #43cc05; outline-offset: 4px; }
.wt-item__meta { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-top: 12px; padding: 0 2px; }
.wt-item__mark { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 74px; max-height: 30px; object-fit: contain; }
.wt-item__mark.is-tile { border-radius: 5px; }
.wt-item__name { flex: 0 0 auto; display: block; max-width: 46%; font-size: 12px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #0a0a0a; }
.wt-item__name span { display: none; }
.wt-item__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.3; letter-spacing: -.01em; color: #565a63; }
.wt-item__ig { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; text-decoration: none; transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.wt-item__ig svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wt-item__ig:hover, .wt-item__ig:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(238, 42, 123, .6); }
.wt-item__ig:focus-visible { outline: 2px solid #43cc05; outline-offset: 3px; }

/* ── the closing wall: every mark in the client library ───────────────── */
.pf-more { padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid #ebe7e1; background: #fff; scroll-margin-top: calc(94 * var(--u) + 12px); }
.pf-more__title, .pf-end__title { margin: 18px 0 0; font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; color: #0a0a0a; }
.pf-more__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.pf-more__list li { display: grid; gap: 14px; justify-items: center; align-content: center; padding: 26px 18px; border: 1px solid #ebe7e1; border-radius: 16px; background: #fbf8f5; text-align: center; font-size: 12.5px; font-weight: 600; color: #333; }
.pf-more__logo { display: block; height: 58px; width: auto; max-width: 100%; object-fit: contain; }
.pf-more__logo.is-tile { border-radius: 8px; }

/* ── the end ───────────────────────────────────────────────────────────── */
.pf-end { padding: clamp(56px, 8vw, 120px) 0; border-top: 1px solid #ebe7e1; background: #f7f3ee; text-align: left; }
.pf-end__lede { max-width: 48ch; margin: 18px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: #565a63; }
.pf-end__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 30px 0 0; }
.pill--pf { height: 48px; padding: 0 26px; gap: 14px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.pill--pf svg { width: 20px; stroke-width: 1.6px; }
.pf-end__back { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: #111; }
.pf-end__back svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pf-end__back:hover svg, .pf-end__back:focus-visible svg { transform: translateX(-4px); }
.pf-foot { padding: 26px 0 34px; border-top: 1px solid #ebe7e1; background: #fff; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #6c6e76; }
.pf-foot .pf-wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.pf-foot a { color: #111; text-decoration: none; }

/* ── the lightbox ──────────────────────────────────────────────────────── */
.pf-light { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: 56px minmax(0, 1fr) auto 48px; align-items: center; justify-items: center; background: rgba(12, 12, 14, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.pf-light[hidden] { display: none; }
.pf-light__close { grid-column: 3; grid-row: 1; border-color: rgba(255, 255, 255, .45); color: #fff; }
.pf-light__close:hover, .pf-light__close:focus-visible { background: #fff; color: #111; border-color: #fff; }
/* "Back", top left: the same as the browser's back, which closes the box too */
.pf-light__back { grid-column: 1 / 3; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 34px; margin: 0 0 0 16px; padding: 0 16px 0 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: transparent; color: #fff; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .45s cubic-bezier(.16, 1, .3, 1); -webkit-tap-highlight-color: transparent; }
.pf-light__back svg { width: 16px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pf-light__back:hover, .pf-light__back:focus-visible { background: #fff; color: #111; border-color: #fff; }
.pf-light__back:hover svg, .pf-light__back:focus-visible svg { transform: translateX(-3px); }
.pf-light__back:active { transform: scale(.97); }
.pf-light__back:focus-visible { outline: 2px solid #43cc05; outline-offset: 3px; }
.pf-light__nav { border-color: rgba(255, 255, 255, .45); color: #fff; grid-row: 2; }
.pf-light__nav:hover, .pf-light__nav:focus-visible { background: #fff; color: #111; border-color: #fff; }
.pf-light__nav--prev { grid-column: 1; }
.pf-light__nav--next { grid-column: 3; }
.pf-light__nav[hidden] { display: none; }
.pf-light__stage { grid-column: 2; grid-row: 2; align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0; overflow: hidden; }
.pf-light__stage img, .pf-light__stage video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #000; }
.pf-light__stage video { height: 100%; aspect-ratio: var(--ratio, 9 / 16); }
.pf-light__stage video.is-wide { height: auto; width: 100%; max-height: 100%; }
.pf-light__cap { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; max-width: 100%; margin: 0; padding: 12px 0 0; font-size: 13px; line-height: 1.3; letter-spacing: -.005em; color: rgba(255, 255, 255, .85); text-align: center; }
.pf-light__cap b { font-weight: 700; color: #fff; }
.pf-light__cap a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 1px; }
.pf-light__cap a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pf-light__cap a:hover, .pf-light__cap a:focus-visible { border-bottom-color: #98f014; }
.pf-light__cap:empty { display: none; }
.pf-light__count { grid-column: 2; grid-row: 4; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.pf-body.is-lit { overflow: hidden; }

/* ── entrances: projects.js plays them once, on entry ──────────────────── */
.pf.is-live [data-in], .pf.is-live .wt-item { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .pf [data-in], .pf .wt-item { transform: none !important; opacity: 1 !important; }
  .pf-rail { scroll-behavior: auto; }
  .wt-item__play:hover, .wt-item__play:focus-visible { transform: none; }
  .wt-item__glyph { transition: opacity .2s; }
}

/* ── narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .wt__head { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .wt__brands { grid-column: 1 / -1; justify-self: start; max-width: none; margin-top: 4px; }
  .wt__logos { justify-content: flex-start; }
  .wt-item { --card-w: clamp(200px, 27vw, 260px); }
  .wt-item--wide { --card-w: clamp(320px, 60vw, 560px); }
  .wt-item--poster { --card-w: clamp(180px, 24vw, 230px); }
  .pf-light { grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-rows: 52px minmax(0, 1fr) auto 44px; }
}
@media (max-width: 720px) {
  .pf-title { font-size: clamp(40px, 12vw, 64px); }
  .pf-kpis li { padding-right: 18px; margin-right: 18px; }
  .pf-index a { height: 38px; font-size: 12.5px; }
  .wt__head { gap: 14px 16px; }
  .wt__n { font-size: clamp(40px, 12vw, 56px); }
  .wt__title { margin-top: 12px; font-size: clamp(26px, 8vw, 36px); }
  .wt__logos li { min-height: 56px; padding: 6px 12px; border-radius: 12px; }
  .wt__logo { max-height: 44px; max-width: 120px; }
  .wt__word b { font-size: 13.5px; }
  .wt__word span { font-size: 9px; }
  /* one and a bit cards per screen, so the next one shows there is more */
  .wt-item { --card-w: min(72vw, 300px); }
  .wt-item--wide { --card-w: 84vw; }
  .wt-item--poster { --card-w: min(62vw, 240px); }
  .wt-item__glyph { width: 50px; height: 50px; }
  .pf-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pf-more__list li { padding: 20px 12px; font-size: 12px; }
  .pf-more__logo { height: 48px; }
  .pf-light { grid-template-columns: 8px minmax(0, 1fr) 8px; grid-template-rows: 56px minmax(0, 1fr) auto 72px; }
  .pf-light__close { grid-column: 2; justify-self: end; margin-right: 8px; }
  .pf-light__back { grid-column: 2; margin-left: 8px; }
  .pf-light__nav { grid-row: 4; grid-column: 2; }
  .pf-light__nav--prev { justify-self: start; margin-left: 8px; }
  .pf-light__nav--next { justify-self: end; margin-right: 8px; }
  .pf-light__cap { padding: 10px 44px 0; font-size: 12px; }
  .pf-light__count { grid-row: 4; grid-column: 2; }
}