@font-face {
  font-family: "Maytra";
  src: url("./Maytra.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:is(
  .dj-video-grid__eyebrow,
  .live-collabs__eyebrow,
  .dsg-eyebrow,
  .dr-difference-sticky__eyebrow,
  .dr-sticky-results__eyebrow,
  [style*="Maytra" i]
) {
  font-family: "Maytra", cursive !important;
}

/* Font-metric compensation approved in the Local Maytra preview. */
.dj-video-grid__eyebrow {
  transform: rotate(-3.7deg);
}

.live-collabs__eyebrow,
.dsg-eyebrow {
  transform: translateY(28px) rotate(-3.7deg);
}

.dr-difference-sticky__eyebrow {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0.9 !important;
  transform: translateY(53px) rotate(-3.7deg);
}

.dr-sticky-results__eyebrow,
.dr-sticky-results.is-visible .dr-sticky-results__eyebrow {
  transform: translate3d(-35px, 28px, 0) rotate(-3.7deg);
}

@media (max-width: 743px) {
  .live-collabs__eyebrow {
    transform: rotate(-2.5deg);
  }

  .dsg-eyebrow {
    transform: translateY(2px) rotate(-3.7deg);
  }

  .dr-sticky-results__eyebrow,
  .dr-sticky-results.is-visible .dr-sticky-results__eyebrow {
    transform: rotate(-3.7deg);
  }

  .dr-difference-sticky__eyebrow {
    transform: translateY(37px) !important;
  }

  .ets-slices__eyebrow {
    transform: translateY(6px) rotate(-1deg);
  }
}

@media (min-width: 744px) and (max-width: 1440px) {
  .live-collabs__eyebrow {
    transform: translateY(clamp(14px, 1.6vw, 22px)) rotate(-3.7deg);
  }
}

@media (min-width: 1025px) {
  .dsg-eyebrow {
    transform: translateY(16px) rotate(-3.7deg) !important;
  }

  .dr-difference-sticky__eyebrow {
    transform: translateY(63px) rotate(-3.7deg) !important;
  }

  .dr-sticky-results__eyebrow,
  .dr-sticky-results.is-visible .dr-sticky-results__eyebrow {
    transform: translate3d(-28px, 16px, 0) rotate(-3.6deg) !important;
  }
}