/* ==========================================================================
   Responsive layer — loaded AFTER the Webflow stylesheet on every page.
   Desktop (>= 992px) is untouched: every rule here lives inside a max-width
   media query, so the 1280/1440 pixel-parity with the live Webflow site holds.

   Breakpoints follow Webflow's own: 991 (tablet), 767 (mobile landscape),
   479 (mobile portrait). Values are chosen to keep the desktop rhythm
   (Palanquin type, 16px radii, section spacing) and only shrink what does
   not fit. Work pages share one structure: .titleimage → ._1720 card →
   .main-section > ._1280 > .grid-* — so one set of rules covers all projects.
   ========================================================================== */

/* ------------------------------------------------------------ all widths */
/* The custom <embed> at the top of every page still contains a leftover nav prototype
   (Home / About / Services / Contact, all href="#"). It is fixed at z-index 1000 behind
   the real nav and shows through the translucent bar — visibly so on dark-hero pages even
   on the live site at 1440. This is the only rule here that touches desktop. */
.w-embed > .navigation:not(.w-nav) { display: none; }

/* ------------------------------------------------------- 992px – 1279px */
/* Small laptops. Desktop structure kept (affix nav still shown at left:100px),
   only the outer gutters shrink so 2-column layouts stop overflowing. */
@media screen and (max-width: 1279px) {
  .navblur { padding-left: 80px; padding-right: 80px; }
  .footer, .footer.light, .footer.dark { padding-left: 80px; padding-right: 80px; }
  /* home hero: 78vh instead of a full viewport (canvas follows via fitHero) */
  .intro { position: relative; height: 78vh; min-height: 520px; padding-left: 120px; padding-right: 120px; }
  .introwrap { margin: 0 auto; top: 0; }
  .introarrow { bottom: 24px; margin-bottom: 0; }
  body > canvas, .three-js canvas { top: 80px; }
  .section-home { padding: 100px 80px; }
  .div-200-left, .grid-home { margin-left: 0; }   /* the left margin only made room for the Top/Work affix, hidden below 1280 */
  .projecttags { flex-wrap: wrap; row-gap: 8px; }
  .tag { flex: none; }
  /* work hero: shorter image, card overlaps less */
  .titleimage { height: 64vh; }
  ._1720 { width: calc(100% - 120px); padding: 64px 64px; }
  /* The 360px left padding of every work section only existed to make room for the vertical
     elevator nav; below 1280px that nav becomes a bottom bar, so gutters go symmetric.
     Vertical rhythm: 220 -> 140 between sections (variants with their own top/bottom scaled
     alongside), spacer blocks 160/100 -> 120/80. */
  .main-section.main-section { padding-left: 60px; padding-right: 60px; }
  .main-section { padding-top: 140px; padding-bottom: 140px; }
  .main-section.meican { padding-top: 100px; padding-bottom: 140px; }
  .main-section.meicanlight { padding-top: 20px; padding-bottom: 100px; }
  .main-section.meicandark { padding-top: 100px; }
  .dq-div-block { padding: 140px 60px; }
  .side-400-140 { margin-left: 60px; margin-right: 60px; }
  .div-160 { height: 120px; }
  .div-100 { height: 80px; }
  .w-richtext a, .text-block-54 { overflow-wrap: anywhere; }

  /* --- work: elevator nav (ul#affix, one per project page) -> fixed bottom bar of pills.
     The page's own jQuery keeps toggling .nav-hidden and li.active; colours (per-project
     brand colour on .active) stay with the page's embed CSS. --- */
  /* (three classes: the page's inline <style> comes later in the document and would win ties) */
  ul.nav.nav-stacked.affix {
    top: auto; bottom: 0; left: 0; right: 0;
    height: auto;              /* the site's own .nav (old nav section) sets height: 96px */
    transform: none; margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; z-index: 900;
    background: rgba(28, 28, 28, 0.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  ul.nav.nav-stacked.affix::-webkit-scrollbar { display: none; }
  ul.nav.nav-stacked.affix.nav-hidden { display: none; }
  ul.nav.nav-stacked.affix li { margin: 0; flex: none; }
  ul.nav.nav-stacked.affix li a { display: block; padding: 6px 12px; border-radius: 999px; white-space: nowrap; font-size: 14px; line-height: 20px; }
  ul.nav.nav-stacked.affix li.active a { background: rgba(255, 255, 255, 0.1); }
  body.body-light ul.nav.nav-stacked.affix { background: rgba(255, 255, 255, 0.92); border-top-color: rgba(0, 0, 0, 0.06); }
  body.body-light ul.nav.nav-stacked.affix li.active a { background: rgba(0, 0, 0, 0.06); }
  body:has(ul.nav.affix) .footer { padding-bottom: 96px; }   /* keep the footer clear of the bar */
  body:has(.three-js) ul.nav.nav-stacked.affix { display: none !important; }  /* home's 2-item "Top / Work" version: not worth a bar */

  /* --- resume: name above a single row of contacts; narrower label column --- */
  .about-resume-section { padding: 64px 80px 100px; }
  ._1280.resume { padding: 64px; }
  .resume-title { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 56px; }
  .resume-contact { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; line-height: 24px; text-align: left; }
  .resume-section { grid-template-columns: auto 60px 1fr; grid-row-gap: 56px; }
  .resume-division { font-size: 18px; line-height: 32px; }
}

/* -------------------------------------------------------------- <= 991px */
@media screen and (max-width: 991px) {
  /* --- global chrome --- */
  /* The old template gives .navigation 25px/20px padding below 991px, which pushes the
     80px-tall nav row out of its 80px box. Keep the desktop geometry instead. */
  .navigation.w-nav { padding: 0; }
  .navblur { padding-left: 40px; padding-right: 40px; }
  .footer, .footer.light, .footer.dark { padding-left: 40px; padding-right: 40px; }

  /* --- resume. Spacing system: 48px between blocks (SKILLSET / EXPERIENCE / EDUCATION),
     16px label -> content, 36px between entries, 8px title -> meta, 6px between bullets. --- */
  ._1280.resume { padding: 48px; }
  .resume-name { font-size: 40px; line-height: 48px; }
  .resume-title { margin-bottom: 48px; gap: 10px; }
  .resume-contact { font-size: 14px; line-height: 22px; }
  .resume-section { grid-template-columns: 1fr; grid-row-gap: 0; }   /* label above content */
  .resume-section > * { grid-column: 1 / -1 !important; }
  .resume-section > div:empty { display: none; }                      /* the spacer column cells */
  .resume-division { font-size: 13px; line-height: 20px; letter-spacing: .08em; margin-bottom: 16px; }
  .resume-division ~ .resume-division { margin-top: 48px; }
  /* skills: the template's own <= 991px #w-node rules make each cell span both columns
     (heading, heading, list, list); keep the two columns instead */
  .w-layout-grid.grid-60-4-3 { grid-template-columns: 1fr 1fr; grid-column-gap: 32px; }
  .w-layout-grid.grid-60-4-3 > * { grid-column: auto !important; }
  .resume-experience { grid-row-gap: 36px; }
  .resume-job { flex-wrap: wrap; }              /* role drops to its own line instead of squeezing the company */
  .company-name { min-width: 0; max-width: 100%; }

  /* --- home: hero no longer a full viewport; both glow shapes are kept inside it
     (canvas is sized to .intro and the scene scaled by fitHero() in the home embed) --- */
  .intro { height: 72vh; min-height: 480px; padding-left: 40px; padding-right: 40px; }
  .name, .nameshadow { font-size: 80px; line-height: 96px; width: 100%; text-align: center; }
  /* the blurred copy overlays the name exactly however many lines it wraps to */
  .nameshadow { position: absolute; top: 0; left: 0; right: 0; margin: 0; float: none; }
  .section-home { padding: 72px 40px; }
  .div-200-left, .grid-home { margin-left: 0; }
  .grid-home { grid-column-gap: 40px; grid-row-gap: 100px; }
  .projecttags { flex-wrap: wrap; row-gap: 8px; }
  .tag { flex: none; }

  /* --- work: hero card. ._1720-bg stays 80% wide on every breakpoint: the IX2
     "1720 Zoom" scroll action scales it ×1.25, i.e. to exactly the full width. --- */
  .titleimage { height: 56vh; }
  ._1720 { width: calc(100% - 80px); margin-top: -240px; padding: 56px 48px; }
  ._1720-bg { width: 80%; height: 240px; margin-top: -240px; }

  /* --- work: sections. The 360px left padding exists for the affix nav; gone with it.
     Doubled class = same specificity as the colour variants (.main-section.meican …). --- */
  .main-section.main-section { padding-left: 40px; padding-right: 40px; }
  .main-section { padding-top: 96px; padding-bottom: 96px; }
  .main-section.meican { padding-top: 80px; padding-bottom: 96px; }
  .main-section.meicanlight { padding-top: 20px; padding-bottom: 80px; }
  .main-section.meicandark { padding-top: 80px; }
  .dq-div-block { padding: 96px 40px; }
  .side-400-140 { margin-left: 40px; margin-right: 40px; }
  .div-160 { height: 96px; }
  .div-100 { height: 64px; }
  .div-80 { height: 56px; }
  .about-resume-section { padding: 40px 40px 72px; }

  /* --- work: overview (description | team | responsibilities) is authored row-major —
     3 titles then 3 bodies — so stacking it needs the pairs re-ordered --- */
  .project-overview { grid-template-columns: 1fr; grid-row-gap: 0; }
  .project-overview > * { grid-column: 1 / -1 !important; }
  .project-overview > :nth-child(1) { order: 1; }
  .project-overview > :nth-child(4) { order: 2; margin-bottom: 28px; }
  .project-overview > :nth-child(2) { order: 3; }
  .project-overview > :nth-child(5) { order: 4; margin-bottom: 28px; }
  .project-overview > :nth-child(3) { order: 5; }
  .project-overview > :nth-child(6) { order: 6; }

  /* --- work: 4/5-column stat grids -> 2 columns (children spanning >= 2 columns are
     made full-width by responsive.spans.css, generated from the DOM) --- */
  .grid-32-32-4, .grid-40-16-5, .grid-60-60-4, .tmo-card.flex { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------- <= 767px */
@media screen and (max-width: 767px) {
  /* --- global chrome --- */
  .navblur { padding-left: 24px; padding-right: 24px; }
  .footer, .footer.light, .footer.dark { padding: 32px 24px; }

  /* --- mobile type scale. Desktop: h1 44/62, h2 36/50, h3 30/46, h4 24/38, h5 20/34,
     body 16/28. Body keeps 16px but tightens to 26px leading (1.75 -> 1.6) for ~40-char
     lines; captions and metas step down one size. --- */
  h1.heading-jumbo, h1.heading-jumbo.dark-mode { font-size: 40px; line-height: 48px; margin-top: 24px; margin-bottom: 24px; }
  h1 { font-size: 30px; line-height: 38px; }
  h2 { font-size: 26px; line-height: 34px; }
  h3 { font-size: 22px; line-height: 30px; }
  h4 { font-size: 19px; line-height: 28px; }
  h5 { font-size: 18px; line-height: 26px; }
  p, li, blockquote, .w-richtext, .self-intro-content, .paragraph-10, .primaryparagraph, .insightparagraph { line-height: 26px; }
  blockquote { font-size: 18px; line-height: 28px; }
  .imagetitle { font-size: 14px; line-height: 22px; }
  .project-title { font-size: 28px; line-height: 36px; }
  .introitalic, .subtitle { font-size: 17px; line-height: 28px; }   /* same role, two classes across projects */
  .position-name-text { font-size: 18px; line-height: 28px; }
  .next-project, .last-project { font-size: 20px; line-height: 30px; }
  .text-block-49 { font-size: 32px; line-height: 40px; }
  .text-block-44 { font-size: 28px; line-height: 34px; }

  /* --- mobile spacing. Row gaps of the 2-column grids were column-row gaps on desktop;
     stacked into one column they became the gap between a text block and its own image. --- */
  .grid-3-2, .grid-2-3 { grid-row-gap: 24px; }
  .grid-80-100-2, .grid-80-80-2 { grid-row-gap: 32px; }
  .grid-60-60-2, .grid-80-60-2, .grid-60-60-4, .grid-51516 { grid-row-gap: 28px; }
  .grid-80-40-2 { grid-row-gap: 24px; }
  .grid-32-32-4 { grid-row-gap: 20px; }
  .pagination-grid { margin-bottom: 48px; grid-row-gap: 24px; }
  .item-pagination-next.item-pagination-next, .item-pagination-last.item-pagination-last { margin-top: 16px; margin-bottom: 16px; }

  /* --- home --- */
  .intro { height: 64vh; min-height: 440px; padding-left: 24px; padding-right: 24px; }
  .name, .nameshadow { font-size: 64px; line-height: 76px; }
  .paragraphlight { font-size: 20px; line-height: 32px; }
  .section-home { padding: 56px 24px; }
  .grid-home { grid-row-gap: 56px; }
  .workcover { margin-bottom: 20px; }
  .projectsub { line-height: 28px; margin-bottom: 16px; }
  .name { margin-bottom: 24px; }

  /* --- about / resume --- */
  .about-resume-section { padding: 32px 24px 64px; }
  .about-image { width: 100%; max-width: 360px; }
  .self-intro-title { font-size: 32px; line-height: 48px; }
  /* resume type on phones: desktop 16/28 copy is too airy in a ~310px column */
  ._1280.resume { padding: 32px 24px; border-radius: 16px; font-size: 15px; line-height: 24px; }
  .resume-name { font-size: 32px; line-height: 40px; }
  .resume-tagline { font-size: 15px; line-height: 22px; }
  .resume-contact { font-size: 14px; line-height: 22px; }
  .resume-title { margin-bottom: 36px; }
  .resume-division { margin-bottom: 12px; }
  .resume-division ~ .resume-division { margin-top: 40px; }
  .grid-60-4-3 .company-name { font-size: 17px; line-height: 26px; }
  .skill { font-size: 15px; line-height: 26px; }
  .resume-job, .company-name { font-size: 18px; line-height: 26px; }
  .job-time { font-size: 14px; line-height: 22px; margin-bottom: 6px; }
  .job-discription > div { font-size: 15px; line-height: 24px; }
  .resume-experience { grid-row-gap: 30px; }

  /* --- work: hero --- */
  .titleimage { height: 50vh; }
  ._1720 { width: 100%; margin-top: -200px; padding: 40px 24px; }
  ._1720-bg { width: 80%; height: 200px; margin-top: -200px; }
  .main-section.main-section { padding: 72px 24px; }
  .main-section.meicanlight { padding-top: 16px; padding-bottom: 64px; }
  .dq-div-block { padding: 72px 24px; }
  .div-160 { height: 72px; }
  .div-100 { height: 48px; }
  .div-80 { height: 40px; }
  .div-60 { height: 40px; }
  .side-400-140 { margin-left: 24px; margin-right: 24px; }
  .greybg, .tmo-card { padding: 24px; }
  .takeaway { padding: 16px 24px; }

  /* --- every grid becomes one column; Webflow's per-child #w-node spans
     (span 2 / span 3 / span 4) would otherwise create implicit columns --- */
  .w-layout-grid:not(.backtotop) { grid-template-columns: 1fr; }
  .w-layout-grid:not(.backtotop) > * { grid-column: 1 / -1 !important; }

  /* before/after grids with a spacer column (image, arrow, image / caption, gap, caption):
     drop the empty gap cells, keep each caption under its own image, turn the arrow downwards */
  .grid-818 > div:empty, .grid-51515 > div:empty, .grid-60-2-gap > div:empty { display: none; }
  .grid-818 > :nth-child(2), .grid-51515 > :nth-child(2), .grid-51515 > :nth-child(4), .grid-60-2-gap > :nth-child(2) {
    transform: rotate(90deg); justify-self: center; align-self: center; margin: 4px 0;
  }
  /* the arrow PNGs are 88–200px squares that the desktop spacer column squeezed */
  .grid-818 > :nth-child(2), .grid-51515 > :nth-child(2), .grid-51515 > :nth-child(4), .grid-60-2-gap > :nth-child(2),
  .grid-818 > :nth-child(2) img, .grid-51515 > :nth-child(2) img, .grid-51515 > :nth-child(4) img, .grid-60-2-gap > :nth-child(2) img {
    width: 48px; height: 48px; object-fit: contain;
  }
  .grid-818 > :nth-child(1) { order: 1; } .grid-818 > :nth-child(4) { order: 2; }
  .grid-818 > :nth-child(2) { order: 3; } .grid-818 > :nth-child(3) { order: 4; }
  .grid-818 > :nth-child(6) { order: 5; }
  .grid-51515 > :nth-child(1) { order: 1; } .grid-51515 > :nth-child(6) { order: 2; }
  .grid-51515 > :nth-child(2) { order: 3; } .grid-51515 > :nth-child(3) { order: 4; }
  .grid-51515 > :nth-child(8) { order: 5; } .grid-51515 > :nth-child(4) { order: 6; }
  .grid-51515 > :nth-child(5) { order: 7; } .grid-51515 > :nth-child(10) { order: 8; }
  .grid-60-2-gap > :nth-child(1) { order: 1; } .grid-60-2-gap > :nth-child(4) { order: 2; }
  .grid-60-2-gap > :nth-child(2) { order: 3; } .grid-60-2-gap > :nth-child(3) { order: 4; }
  .grid-60-2-gap > :nth-child(6) { order: 5; }

  /* Exceptions to "one column" (must come after the generic rule above — same specificity).
     Resume bullets: bullet | text; resume skills keep their two columns until 479px. */
  .w-layout-grid.job-discription { grid-template-columns: auto 1fr; }
  .w-layout-grid.job-discription > * { grid-column: auto !important; }
  .w-layout-grid.grid-60-4-3 { grid-template-columns: 1fr 1fr; }
  .w-layout-grid.grid-60-4-3 > * { grid-column: auto !important; }

  /* Rows of phone screenshots and logo walls stay multi-column
     (thumbnails open in the lightbox). 4-up phone rows (.grid-32-32-4 / .grid-60-60-4) become
     2×2, 3-up phone rows (.grid-24-24-3 / .grid-48-48-3) stay 3 across, logo walls
     (.grid-40-16-5) go 2 across. Children Webflow spans across >= 2 columns (captions) stay
     full-width via responsive.spans.css — its #id rules outrank these. */
  .w-layout-grid.grid-32-32-4, .w-layout-grid.grid-60-60-4, .w-layout-grid.grid-40-16-5 { grid-template-columns: 1fr 1fr; grid-column-gap: 16px; }
  .w-layout-grid.grid-24-24-3, .w-layout-grid.grid-48-48-3 { grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 12px; }
  .w-layout-grid.grid-32-32-4 > *, .w-layout-grid.grid-60-60-4 > *, .w-layout-grid.grid-40-16-5 > *,
  .w-layout-grid.grid-24-24-3 > *, .w-layout-grid.grid-48-48-3 > * { grid-column: auto !important; }

  /* unbreakable strings (URLs) inside rich text */
  .w-richtext a, .text-block-54 { overflow-wrap: anywhere; }

  /* 4 phones + 4 captions (.grid-32-32-4 with 8 children, captions are .imagetitle): keep each
     caption under its own phone when the row wraps to 2×2 */
  .grid-32-32-4 > .imagetitle:nth-child(5):nth-last-child(4) { order: 3; }
  .grid-32-32-4 > .imagetitle:nth-child(6):nth-last-child(3) { order: 4; margin-bottom: 16px; }
  .grid-32-32-4 > .imagelightbox:nth-child(3):nth-last-child(6) { order: 5; }
  .grid-32-32-4 > .imagelightbox:nth-child(4):nth-last-child(5) { order: 6; }
  .grid-32-32-4 > .imagetitle:nth-child(7):nth-last-child(2) { order: 7; }
  .grid-32-32-4 > .imagetitle:nth-child(8):last-child { order: 8; }

  /* 3-up feature rows authored row-major (icon,icon,icon / title,title,title / text,text,text) */
  .grid-80-12-3 > :nth-child(1) { order: 1; } .grid-80-12-3 > :nth-child(4) { order: 2; } .grid-80-12-3 > :nth-child(7) { order: 3; margin-bottom: 32px; }
  .grid-80-12-3 > :nth-child(2) { order: 4; } .grid-80-12-3 > :nth-child(5) { order: 5; } .grid-80-12-3 > :nth-child(8) { order: 6; margin-bottom: 32px; }
  .grid-80-12-3 > :nth-child(3) { order: 7; } .grid-80-12-3 > :nth-child(6) { order: 8; } .grid-80-12-3 > :nth-child(9) { order: 9; }

  /* prev / next project links stack */
  .item-pagination-next, .item-pagination-last { margin-left: 0; margin-right: 0; }
  .next-project, .last-project { margin-left: 0; margin-right: 0; }
}

/* -------------------------------------------------------------- <= 479px */
@media screen and (max-width: 479px) {
  .navblur { padding-left: 20px; padding-right: 20px; }
  .footer, .footer.light, .footer.dark { padding: 28px 20px; }

  h1.heading-jumbo, h1.heading-jumbo.dark-mode { font-size: 32px; line-height: 40px; }
  h1 { font-size: 26px; line-height: 34px; }
  h2 { font-size: 24px; line-height: 32px; }
  h3 { font-size: 21px; line-height: 28px; }
  .project-title { font-size: 26px; line-height: 34px; }
  .next-project, .last-project { font-size: 18px; line-height: 28px; }

  .intro { padding-left: 20px; padding-right: 20px; }
  .name, .nameshadow { font-size: 48px; line-height: 58px; letter-spacing: -.5px; }
  .paragraphlight { font-size: 18px; line-height: 30px; }
  .section-home { padding: 48px 20px; }
  .grid-home { grid-row-gap: 56px; }

  .intro { height: 60vh; min-height: 420px; }

  .about-resume-section { padding: 24px 20px 56px; }
  ._1280.resume { padding: 28px 20px; }
  .resume-name { font-size: 28px; line-height: 36px; }
  .resume-title { margin-bottom: 32px; }
  .resume-division ~ .resume-division { margin-top: 36px; }
  .resume-experience { grid-row-gap: 28px; }
  .job-info { flex-wrap: wrap; column-gap: 12px; }
  /* skills (Design | Toolbox) are authored row-major: heading, heading, list, list */
  .w-layout-grid.grid-60-4-3 { grid-template-columns: 1fr; }
  .w-layout-grid.grid-60-4-3 > * { grid-column: 1 / -1 !important; }
  .grid-60-4-3 > :nth-child(1) { order: 1; } .grid-60-4-3 > :nth-child(3) { order: 2; margin-bottom: 16px; }
  .grid-60-4-3 > :nth-child(2) { order: 3; } .grid-60-4-3 > :nth-child(4) { order: 4; }

  .titleimage { height: 45vh; }
  ._1720 { margin-top: -120px; padding: 40px 20px; }
  ._1720-bg { height: 120px; margin-top: -120px; }
  .main-section.main-section { padding: 56px 20px; }
  .main-section.meicanlight { padding-top: 16px; padding-bottom: 48px; }
  .dq-div-block { padding: 56px 20px; }
  .div-160 { height: 56px; }
  .div-100 { height: 40px; }
  .side-400-140 { margin-left: 20px; margin-right: 20px; }
  .greybg, .tmo-card { padding: 20px; }
  /* persona cards (icon column + text) stack */
  .div-block-16 { flex-direction: column; }
  .div-block-17 { margin: 20px 20px 0; }
}

/* ---- Older project template (Pop-Up Night Market, Power Spot, Rondo): the hero is a full-width
   .title-div-block(-dark) with 220px / 140–220px padding at every width (Webflow never defined
   smaller breakpoints for it). Side padding follows .main-section's tiers so the hero text lines
   up with the sections below; the top padding clears the 80px header. The Pop-Up hero's fixed
   background is rendered badly by mobile Safari, so it scrolls below 992px.
   Play (/play): the photo grid kept a 200px left margin for the side anchor (a bottom bar below
   1280px) and the 140px section padding; it follows the same tiers, then stacks. ---- */
@media screen and (max-width: 1279px) {
  .title-div-block.title-div-block, .title-div-block-dark.title-div-block-dark { padding: 180px 60px 120px; }
  .playsection { padding: 100px 60px 120px; }
  .play-two-row { margin-left: 0; }
}
@media screen and (max-width: 991px) {
  .title-div-block.title-div-block, .title-div-block-dark.title-div-block-dark { padding: 160px 40px 96px; }
  .title-div-block-dark { background-attachment: scroll; }
  .playsection { padding: 96px 40px 96px; }
}
@media screen and (max-width: 767px) {
  .title-div-block.title-div-block, .title-div-block-dark.title-div-block-dark { padding: 136px 24px 72px; }
  .playsection { padding: 88px 24px 80px; }
  .play-two-row { grid-template-columns: 1fr; grid-row-gap: 24px; }
  .play-column, .play-row-3 { grid-column-gap: 16px; grid-row-gap: 24px; }
  .play-row-3 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 479px) {
  .title-div-block.title-div-block, .title-div-block-dark.title-div-block-dark { padding: 120px 20px 56px; }
  .playsection { padding: 80px 20px 72px; }
  .play-column, .play-row-3 { grid-column-gap: 12px; grid-row-gap: 16px; }
}