/* ===========================================================================
   EPK PAGE
   All values measured off live production (tests/visual/data/styles-epk-*.json)
   at 1440x900, not estimated. Section geometry targets:

     Hero            y=72    h=900
     Contact strip   y=972   h=146   (email baseline y=1070)
     Biography       y=1118  h=1040
     Press & Media   y=2158  h=1333
     Discography     y=3491  h=760   (bg #131210 — lighter than page ground)
     Future Projects y=4251  h=505
     Gallery         y=4756  h=1017
     Booking CTA     y=5931  h=547
     Footer          y=6478  h=329
     document height 6807

   The EPK ground is #0d0c0b (warmer than the homepage's #0a0a0a).
   =========================================================================== */

.epk-page {
  background: #0d0c0b;
}

/* Shared heading + wrapper primitives ------------------------------------- */

.epk-wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 810px) { .epk-wrap { padding-inline: 80px; } }

.epk-center { text-align: center; }

/* 56px/67.2px Playfair with -1.12px tracking — the EPK's section heading. */
.epk-h2 {
  font-family: var(--font-display);
  /* Production: 36px, -0.72px tracking, 43.2px line box. */
  font-size: 36px;
  letter-spacing: -0.72px;
  line-height: 43.2px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-top: 18px;
}
@media (min-width: 1200px) {
  .epk-h2 { font-size: 56px; line-height: 67.2px; letter-spacing: -1.12px; }
}

.epk-link {
  display: inline-block;
  padding-block: 9px;
  /* Production: 13px, weight 500, sentence case, ~0.65px tracking — these are
     inline prose links, not the uppercase micro-labels used elsewhere. */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  /* 'Read More' in the quote cards is 12px/0.6px; the biography's inline link
     is larger — see .epk-bio-body .epk-link below. */
  text-transform: none;
  color: var(--color-gold);
  transition: opacity 0.2s ease;
}
.epk-link:hover { opacity: 0.72; }
.epk-bio-body .epk-link { font-size: 13px; letter-spacing: 0.65px; }

/* Shared button. Gold hairline, fills gold on hover. */
/* Production's primary EPK CTA is a SOLID GOLD button with square corners and
   no border — mine was a transparent outline, which is why Moe saw the wrong
   colours. Measured: bg rgb(201,168,76), radius 0, 267x41. */
.epk-cta .epk-btn,
.epk-btn-primary {
  letter-spacing: 1.32px;
  background: var(--color-gold);
  color: #0d0c0b;
  border: 0;
  border-radius: 0;
  /* Measured 267x46 on production. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 16px 40px;
}
.epk-cta .epk-btn:hover,
.epk-btn-primary:hover { background: #f5f5f0; color: #0d0c0b; }

/* "Press Kit (PDF)": light label inside a GOLD hairline, radius 4px. */
.epk-downloads .epk-btn-outline {
  color: #f5f5f0;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
}
.epk-downloads .epk-btn-outline:hover {
  background: var(--color-gold);
  color: #0d0c0b;
}

.epk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border: 1px solid var(--color-gold);
  border-radius: 2px;
  color: var(--color-gold);
  /* 11px / 1.32px — measured on the EPK's own buttons. */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.epk-btn:hover { background: var(--color-gold); color: #0d0c0b; }
.epk-btn-outline {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.82);
}
.epk-btn-outline:hover {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* HERO ---------------------------------------------------------------------
   900px tall. h1 108px/-3.24px tracking at y=447. Eyebrow y=414, sub y=575,
   CTA y=624 — all left-aligned at x=80, NOT centred like the homepage hero.
   --------------------------------------------------------------------------- */
.epk-hero {
  position: relative;
  /* Production's hero is the FULL viewport height at every breakpoint
     (measured 800/844/1024/768/900) — the fixed nav overlays it rather than
     pushing it down, so no 72px subtraction. 100svh avoids the mobile
     URL-bar resize jump that plain vh has. */
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: #0d0c0b;
  overflow: hidden;
}
.epk-hero-media {
  position: absolute;
  inset: 0;
  /* No photograph — production's EPK hero is a pure gradient field. Measured
     off the live page: a 160deg base with a warm-olive top-left falling to a
     cool blue-black bottom-right. */
  background-image: linear-gradient(160deg,
    rgb(17, 18, 8) 0%,
    rgb(13, 12, 11) 55%,
    rgb(10, 11, 14) 100%);
}
/* Two further layers over the gradient base, both measured on production. */
.epk-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.epk-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 80%, rgb(13, 12, 11) 100%);
}
.epk-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
  /* Centred, not left-aligned — production's h1 computes text-align:center in
     a 1280px column starting at x=80. */
  text-align: center;
  /* +7px: production's eyebrow sits at y=414 and h1 at y=447; flex centring
     alone landed them at 407/441. */
  padding-top: 14px;
}
@media (min-width: 810px) { .epk-hero-content { padding-inline: 80px; } }

.epk-hero-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.2px;
  line-height: 13.2px;
  text-transform: uppercase;
  color: var(--color-gold);
}
.epk-hero-title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text-primary);
  margin-top: 20px;
}
@media (min-width: 810px)  { .epk-hero-title { font-size: 76px; } }
@media (min-width: 1200px) { .epk-hero-title { font-size: 108px; line-height: 108px; letter-spacing: -3.24px; } }

.epk-hero-sub {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 2.16px;
  line-height: 14.4px;
  text-transform: uppercase;
  color: var(--color-gold);
}
.epk-hero-cta {
  display: inline-block;
  margin-top: 21px;
  /* Production is a 146x41 BOX (padding 14px 32px, no rule underneath), not an
     underlined text link — the type itself already matched exactly. */
  /* Flex-centred like production's, so the box is exactly 41px tall rather
     than collapsing onto the 13.2px line box (which gave 33px). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 14px 32px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.32px;
  line-height: 13.2px;
  text-transform: uppercase;
  color: var(--color-gold);
  /* NO border. Production's hero CTA is a bare 146x41 flex box with padding
     14px 32px and no outline at all — I added this 1px gold rule in round 13
     while fixing the SIZE, and it is the boxed "BOOK SONYA" in Moe's
     screenshot. Verified identical at 390 and 1440. */
  border: 0;
  padding-bottom: 4px;
  transition: border-color 0.2s ease;
}
.epk-hero-cta:hover { border-color: var(--color-gold); }

/* CONTACT STRIP — centred inline links, y=972..1118 -------------------------- */
.epk-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* One link per row below 420px — production stacks them (measured y=962 /
     1026 / 1089 at 360px, a 191px band). Letting them wrap 2-up made the strip
     136px and left the whole page 56px short. */
  flex-direction: column;
  gap: 0 40px;
  /* Measured band heights: 191 @360 (wraps to 3 lines), 128 @390 (2 lines),
     64 @768, 80 @1024+. */
  padding-block: 24px;
  background: #0d0c0b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.epk-contact a {
  display: inline-block;
  padding-block: 14px;
  font-size: 13px;
  line-height: 15.6px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
}
.epk-contact a:hover { color: var(--color-gold); }
@media (min-width: 380px)  { .epk-contact { flex-direction: row; } }
@media (min-width: 700px)  { .epk-contact { padding-block: 10px; gap: 0 32px; } }
@media (min-width: 1000px) { .epk-contact { padding-block: 18px; gap: 0 40px; } }

/* BIOGRAPHY — portrait 600x800 at x=80 y=1238; copy column 600 wide at x=760.
   Column gap = 760 - (80+600) = 80. Right edge 1360 = 80px gutter.
   --------------------------------------------------------------------------- */
.epk-bio { background: #0d0c0b; padding-block: 120px; }
.epk-bio-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  gap: 48px;
}
@media (min-width: 810px) { .epk-bio-inner { padding-inline: 80px; } }
@media (min-width: 1000px) {
  /* Measured at 1024: portrait x=40 w=432, text x=552 w=432 — two equal
     columns with an 80px gutter. Production splits here, NOT at 1200; keeping
     it stacked to 1200 left the section 395px too tall at 1024. */
  .epk-bio-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .epk-bio-inner {
    grid-template-columns: 600px minmax(0, 1fr);
    column-gap: 80px;
    align-items: start;
  }
}
.epk-bio-figure { margin: 0; }
.epk-bio-figure img {
  width: 100%;
  /* Measured heights: 416 @360, 456 @390, 960 @768, 576 @1024, 800 @1440.
     768 genuinely IS 3:4 (720x960) but 1024 is not (432x576 in a 432 column),
     so pin heights explicitly rather than trusting one ratio everywhere. */
  height: 416px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
@media (min-width: 380px)  { .epk-bio-figure img { height: 456px; } }
@media (min-width: 700px)  { .epk-bio-figure img { height: 960px; } }
@media (min-width: 1000px) { .epk-bio-figure img { height: 576px; } }
@media (min-width: 1200px) { .epk-bio-figure img { height: 800px; } }
/* Copy column starts 46px below the portrait (eyebrow y=1284 vs img y=1238). */
.epk-bio-body { padding-top: 0; }
@media (min-width: 1000px) {
  /* Copy column starts 17px below the portrait at 1024 (eyebrow y=1083 vs
     img y=1066), 46px at 1440 (1284 vs 1238). */
  .epk-bio-body { padding-top: 17px; }
}
@media (min-width: 1200px) { .epk-bio-body { padding-top: 46px; } }

.epk-bio-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-top: 18px;
}
@media (min-width: 1200px) {
  .epk-bio-title { font-size: 40px; line-height: 46px; letter-spacing: -0.8px; }
}
.epk-bio-copy {
  margin-top: 20px;
  font-size: 15px;
  line-height: 25.5px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
}
.epk-bio-body p:has(.epk-link) { margin-top: 15px; }

.epk-stats {
  /* Three across at every width — measured 96px cells at 360px, not stacked. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 1000px) {
  .epk-stats { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 44px; }
}
.epk-stats dt {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 43.2px;
  color: var(--color-gold);
}
.epk-stats dd {
  margin: 6px 0 0;
  /* 11px / 1.32px on production, not 10/1.5. Line-height must be set
     explicitly: leaving it `normal` computed to 18.7px and made the stat rows
     taller than production at every width. */
  line-height: 13.2px;
  font-size: 11px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* PRESS & MEDIA — heading, 2 quote cards, then a 1280x580 photo ------------- */
.epk-press { background: #0d0c0b; padding-block: 151px; }
.epk-quotes {
  display: grid;
  gap: 32px;
  margin-top: 56px;
}
@media (min-width: 810px) { .epk-quotes { grid-template-columns: 1fr 1fr; } }

.epk-quote {
  margin: 0;
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
}
.epk-quote blockquote {
  margin: 0;
  /* Playfair Display italic 17px/28.9px, white — measured on production once
     the typing animation has run. The earlier font audit could not see this:
     the quote text is not in the DOM until the card scrolls into view, so a
     top-of-page scan found only the date label. */
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: rgb(255, 255, 255);
}
.epk-quote figcaption {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.epk-quote .epk-link { margin-top: 9px; }

.epk-wide-photo {
  display: block;
  width: 100%;
  margin-top: 56px;
  /* Parallax target — transform is driven from site.js on scroll.
     will-change keeps it on its own compositor layer so the drift stays smooth. */
  will-change: transform;
  /* Measured 220px tall at 360/390/768, 580 at 1024+.
     object-fit is CONTAIN on production, not cover — cover crops the frame and
     makes the photo read as the wrong size/zoom. */
  height: 220px;
  object-fit: contain;
  border-radius: 2px;
}
@media (min-width: 1000px) { .epk-wide-photo { height: 580px; } }

/* DISCOGRAPHY — the one section on a lighter ground (#131210) --------------- */
.epk-disco { background: #131210; padding-block: 88px 87px; }
@media (min-width: 1200px) { .epk-disco { padding-block: 112px 111px; } }
.epk-album {
  display: grid;
  gap: 32px;
  margin-top: 56px;
}
@media (min-width: 810px) {
  .epk-album { grid-template-columns: 280px minmax(0, 1fr); column-gap: 60px; align-items: start; }
}
.epk-album img {
  width: 100%;
  /* 312x260 on phones (full width, cropped), 220 square at 1024, 280 at 1440. */
  height: 260px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
@media (min-width: 810px) {
  .epk-album img { width: 280px; max-width: 100%; height: 280px; }
}
.epk-album-meta {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--color-gold);
}
.epk-album-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-top: 12px;
}
@media (min-width: 1200px) {
  .epk-album-title { font-size: 40px; line-height: 48px; letter-spacing: -0.8px; }
}
.epk-album-genre {
  margin-top: 10px;
  /* 11px uppercase with 1.1px tracking on production. */
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.epk-tracklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 420px;
}
.epk-tracklist li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.epk-album .epk-btn { margin-top: 30px; }

/* FUTURE PROJECTS ----------------------------------------------------------- */
.epk-future { background: #0d0c0b; padding-block: 138px 137px; }
.epk-future-copy {
  max-width: 820px;
  margin: 26px auto 0;
  font-size: 15px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.7);
}

/* GALLERY — 3-up, each 416x600 ---------------------------------------------- */
.epk-gallery { background: #0d0c0b; padding-block: 133px 132px; }
.epk-grid {
  display: grid;
  /* 16px, not 32px. Production's cells sit at x=80/512/944 and are 416px wide:
     416*3 + 16*2 = 1280. A 32px gap squeezed each cell to 405px, and because
     the photos are object-fit:cover, the narrower box cropped ~6px more off
     each side — which is what cut into the middle photo's framing. */
  gap: 16px;
  margin-top: 56px;
}
@media (min-width: 810px) { .epk-grid { grid-template-columns: repeat(3, 1fr); } }
.epk-grid img {
  width: 100%;
  /* Measured: production shows these at a fixed 320px tall on phones/tablet
     and 292px at 1024, cropping rather than scaling the 416x600 ratio. Using
     the raw aspect-ratio at full mobile width produced 600px-tall images and
     +890px of excess document height. */
  height: 320px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
@media (min-width: 1200px) { .epk-grid img { height: 600px; } }
@media (min-width: 810px) and (max-width: 1199.98px) { .epk-grid img { height: 292px; } }

/* BOOKING CTA --------------------------------------------------------------- */
.epk-downloads-band {
  background: #0d0c0b;
  /* Standalone 158px band (y=5773..5931): eyebrow at y=5813, button y=5847. */
  padding-block: 33px 44px;
}
.epk-downloads-band .eyebrow { letter-spacing: 1.54px; }
.epk-downloads { margin-top: 20px; }

.epk-cta { background: #0d0c0b; padding-block: 116px 125px; }
.epk-cta-eyebrow { margin-top: 0; }
.epk-cta-copy {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.7);
}
.epk-cta .epk-btn { margin-top: 32px; font-size: 12px; letter-spacing: 1.8px; }
.epk-cta-email { margin-top: 18px; }
.epk-cta-email a {
  display: inline-block;
  padding-block: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.epk-cta-email a:hover { color: var(--color-gold); }

/* Mobile trims -------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .epk-bio, .epk-press, .epk-disco, .epk-future, .epk-gallery { padding-block: 72px; }
  .epk-cta { padding-block: 64px 72px; }
  .epk-bio-body { padding-top: 0; }
  .epk-quote { padding: 28px; }

}

/* ---------------------------------------------------------------------------
   TYPE-ON QUOTES — the press summaries type in when scrolled into view.
   Production reveals ~32 characters/sec with a gold caret trailing the text.

   The text ships in the HTML as ordinary content; JS only wraps it. Without
   JS the quote is simply visible, so this can never hide the copy.
   --------------------------------------------------------------------------- */
.epk-quote blockquote .typeon-char {
  /* visibility, NOT opacity/display: hidden characters must still occupy their
     final space. Otherwise the paragraph grows line by line as it types, the
     card reflows, and the caret drops onto its own line — caught by looking at
     a mid-animation render. */
  visibility: hidden;
}
.epk-quote blockquote .typeon-char.is-on {
  visibility: visible;
}
.epk-quote blockquote.typeon-instant .typeon-char {
  /* Safety-net path: reveal everything at once rather than leaving it blank. */
  visibility: visible;
}

/* The caret is absolutely positioned so it never affects wrapping. JS moves it
   to sit right after the last revealed character. */
.epk-quote blockquote {
  position: relative;
}
.typeon-caret {
  color: var(--color-gold);
  font-style: normal;
  transition: opacity 0.4s ease;
  /* Absolutely positioned so the caret takes NO part in line breaking. It was
     previously inline-block with width:0 — zero width, but still a break
     opportunity, so sliding it between characters let the line wrap there and
     the paragraph briefly collapsed 4 lines to 3 (116px -> 87px). That showed
     up as an intermittent reflow-guard failure. */
  position: absolute;
  width: 0;
  overflow: visible;
  pointer-events: none;
}
.typeon-caret.is-done {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Never type at someone who asked for less movement. */
  .epk-quote blockquote .typeon-char { opacity: 1; }
  .typeon-caret { display: none; }
}

@media (max-width: 809.98px) {
  /* Production scales the stat figures down on phones: 22px/26.4px, not the
     desktop 36px. At 36px "Jazz + Pop" wraps to two lines inside its 106px
     column and pushes the Genre label out of alignment with its siblings. */
  .epk-stats dt {
    font-size: 22px;
    line-height: 26.4px;
  }
}

/* ---------------------------------------------------------------------------
   SOLID BUTTON — production's "Listen Now" on the discography card is a filled
   gold button, not the outlined ghost style used elsewhere on the EPK.
   Measured at 390: 151x41, background rgb(201,168,76), no border, 14px/28px
   padding, 12px weight 400, sentence case, dark label.
   --------------------------------------------------------------------------- */
.epk-btn.epk-btn-solid {
  /* Measured on production: 11px / 500 / 1.32px / uppercase, box 151x41.
     It was inheriting 12px/400/none, which made it 19px too narrow. */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  background: rgb(201, 168, 76);
  border: 0;
  border-radius: 0;
  padding: 14px 28px;
  line-height: normal;
  color: rgb(13, 12, 11);
  /* Production measures 151px wide; the gap between icon and label accounts
     for the difference. */
  gap: 10px;
}
.epk-btn.epk-btn-solid:hover {
  background: rgb(216, 184, 96);
  color: rgb(13, 12, 11);
}


/* --------------------------------------------------------------------------
   GALLERY FADE-IN
   Matches the homepage: images fade as they decode instead of appearing in a
   single frame. object-position is preserved (the middle photo's crop was
   fixed earlier and must not regress).
   -------------------------------------------------------------------------- */
/* Gallery images are driven by the ENTRY system (data-anim), so they must not
   also carry the decode fade — two things animating one opacity produced a
   visible 1 -> 0.63 -> 1 flash. Only images WITHOUT data-anim get this. */
.epk-grid img:not([data-anim]) {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.epk-grid img:not([data-anim]).is-loaded,
.epk-grid img:not([data-anim])[data-loaded] { opacity: 1; }
@media (scripting: none) { .epk-grid img { opacity: 1; } }


/* ---------------------------------------------------------------------------
   GALLERY MIDDLE PHOTO — RESPONSIVE CROP
   Production is responsive here and I missed it: object-position is 50% 0%
   BELOW 1200px and 50% 50% at 1200px and up (measured at 390/480/640/768/810/
   900/1024/1200/1440). In round 18b I checked only 1440, found 50% 50%, and
   removed the mobile override as an "unnecessary deviation" — which put the
   crop back on the top of her head on every phone. The 25.4% vertical crop at
   390 is unavoidable (342x320 box from a 342x429 source); anchoring to the top
   is what keeps her face in frame.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .epk-grid img:nth-child(2) { object-position: 50% 0%; }
}