#root .hero__title {
  font-size: clamp(2.25rem, 5.1vw, 4.15rem);
}

:root[lang="en"] #root .hero__title {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

:root[lang="ar"] body {
  font-size: 1.15rem;
}

:root[lang="ar"] #root .hero__title {
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
  line-height: 1.3;
}

#root .hero__intro,
#root .page__lead {
  font-size: 1.1rem;
}

:root[lang="ar"] #root .hero__intro,
:root[lang="ar"] #root .page__lead {
  font-size: 1.22rem;
}

#root .page__title {
  font-size: clamp(2.25rem, 4.8vw, 3.35rem);
}

#root .section__title {
  font-size: clamp(1.8rem, 3.3vw, 2.6rem);
}

#root .work__title {
  font-size: 1.15rem;
}

#root .lightbox__caption h2 {
  font-size: 1.45rem;
}

#root .price__name {
  font-size: 1.52rem;
}

#root .calligraphy-categories__title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

#root .calligraphy-categories__name {
  font-size: clamp(1rem, 1.45vw, 1.16rem);
}

:root[lang="ar"] #root :is(.section__title, .page__title, .price__name) {
  line-height: 1.4;
}

#root .dash .panel__head h1 {
  font-size: 1.82rem;
}

#root .dash .card__title {
  font-size: 1.16rem;
}

#root .dash .dash__brand strong {
  font-size: 1.12rem;
}

@media (max-width: 680px) {
  #root .hero__title {
    font-size: clamp(2.1rem, 8.4vw, 3rem);
  }

  :root[lang="ar"] #root .hero__title {
    font-size: clamp(2.05rem, 8vw, 2.9rem);
  }

  #root .page__title {
    font-size: clamp(2.05rem, 8vw, 3rem);
  }

  #root .section__title {
    font-size: clamp(1.75rem, 6.4vw, 2.3rem);
  }
}