@media (min-width: 62.5rem) {
  [class~="header-image-services"] {
    transform-origin: right;
    animation: heroImg linear;
    animation-timeline: view();
    animation-range: exit;
  }
  [class~="services-type-container"] {
    animation: servicesType ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 31.25rem;
  }
  [class~="services-scroll-content"] {
    animation: scrollContainer ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 18.75rem;
  }
  [class~="services-scroll-logo"] {
    transition: 0.15s ease-in-out;
  }
  [class~="services-scroll-content"] {
    transition: 0.15s ease-in-out;
  }
  [class~="services-scroll-content"]:hover [class~="services-scroll-logo"] {
    scale: 1.2;
  }
  [class~="services-scroll-content"]:hover {
    scale: 1.05;
  }
  [class~="services-scroller-header-1"] p,
  [class~="services-scroller-desc-1"] p {
    background: linear-gradient(90deg, rgb(255, 255, 255), transparent);
    background-size: 200%;
    animation: reveal both linear;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 18.75rem;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-repeat: no-repeat;
  }
  [class~="services-scroller-header-2"] p,
  [class~="services-scroller-desc-2"] p {
    background: linear-gradient(90deg, rgb(10, 10, 10), transparent);
    background-size: 200%;
    animation: reveal both linear;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 18.75rem;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-repeat: no-repeat;
  }
  [class~="services-scroller-header-1"] img {
    animation: fadeIn ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 18.75rem;
  }
  [class~="services-scroller-header-2"] img {
    animation: fadeIn ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 18.75rem;
  }
  [class~="services-scroller-image-1"],
  [class~="services-scroller-image-2"] {
    animation: slideLeft ease-in-out both;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: cover 18.75rem;
  }
}

@media (max-width: 100rem) {
  [class~="services-type-content-desc"] h1 {
    font-size: 1.875rem;
  }
  [class~="services-type-content-desc"] p {
    font-size: 1.1875rem;
  }
  [class~="services-scroll-container"] {
    scale: 90%;
  }
}

@media (max-width: 87.5rem) {
  [class~="services-type-content-desc"] h1 {
    font-size: 1.4375rem;
  }
  [class~="services-type-content-desc"] p {
    font-size: 1.0625rem;
  }
  [class~="services-scroll-container"] {
    scale: 70%;
  }
}

/* FIX: the four detail sections (Customer and Market Understanding,
   New Product Development Research, Brand and Advertising Research,
   Online and Offline Fieldwork Services) only switched from row layout
   to a stacked column layout at 56.25rem. Between 56.25rem and 68.75rem
   the text/image pair was still forced side-by-side inside a FIXED
   height (85vh) section with no room, so at in-between zoom levels the
   text overlapped the image / next section. Fix: move the stacking
   rules up to this breakpoint so there's no more gap. */
@media (max-width: 68.75rem) {
  [class~="services-scroll-container"] {
    scale: 60%;
  }
  [class~="services-scroller-header-1"] p {
    font-size: 2.5rem;
  }
  [class~="services-scroller-header-2"] p {
    font-size: 2.5rem;
  }
  [class~="services-scroller-desc-1"] [class~="service-scroller-desc-txt"] {
    font-size: 1.25rem;
  }
  [class~="services-scroller-desc-2"] [class~="service-scroller-desc-txt"] {
    font-size: 1.25rem;
  }
  [class~="services-description-title"] {
    font-size: 3.125rem;
  }
  [class~="services-description-desc"] {
    font-size: 1.875rem;
  }
  [class~="services-type-container"] {
    flex-wrap: wrap;
  }
  [class~="services-type-content"] {
    max-width: 18.75rem;
    max-height: 18.75rem;
  }
  [class~="services-type-content-desc"] h1 {
    font-size: 1.125rem;
  }
  [class~="services-type-content-desc"] p {
    font-size: 0.875rem;
  }

  /* moved up from the 56.25rem breakpoint to close the overlap gap */
  [class~="services-scroller-container-2"],
  [class~="services-scroller-container-1"] {
    flex-direction: column;
  }
  [class~="services-scroller-desc-2"],
  [class~="services-scroller-desc-1"] {
    max-width: 100%;
  }
  [class~="services-scroll-4"],
  [class~="services-scroll-3"],
  [class~="services-scroll-2"],
  [class~="services-scroll-1"] {
    height: auto;
    min-height: 85vh;
  }
  [class~="services-scroller-image-2"] img,
  [class~="services-scroller-image-1"] img {
    position: relative;
  }
  [class~="services-scroller-image-2"],
  [class~="services-scroller-image-1"] {
    justify-content: center;
    margin: 1.875rem 0;
  }
}

@media (max-width: 56.25rem) {
  [class~="header-description-title"] {
    font-size: 2.5rem;
    text-align: center;
  }
  [class~="header"] img {
    object-position: left;
  }
  [class~="header"] {
    margin-bottom: 0;
  }
  [class~="header"] [class~="wrapper"] {
    height: auto;
  }
  [class~="services-description-desc"] {
    display: none;
  }
  [class~="about-us-description-container"] {
    flex-wrap: wrap;
    scale: 0.6;
  }
  [class~="services-description-title"] {
    font-size: 3.125rem;
  }
  [class~="about-us-description-content-desc-1"] {
    font-size: 1.875rem;
  }
  [class~="services-scroll-container-row"] {
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
  }
  [class~="services-scroll-container-row"] a {
    width: 100%;
  }
  [class~="services-scroll-content"] {
    width: 100%;
  }
  [class~="service-scroll-desc"] p {
    font-size: 1.25rem;
  }
  [class~="services-scroll-container"] {
    scale: 1;
    width: 100%;
  }
  [class~="services-scroll-logo"] {
    max-width: 2.5rem;
  }
  [class~="service-scroll-logo"] {
    max-width: 5.625rem;
  }
  [class~="services-scroller-header-2"] p,
  [class~="services-scroller-header-1"] p {
    text-align: center;
    font-size: 1.875rem;
    margin-top: 1.875rem;
  }
}

@media (max-width: 25rem) {
  [class~="service-scroll-desc"] p {
    font-size: 1.0625rem;
  }
  [class~="services-scroll-download"] {
    max-width: 2.1875rem;
  }
}