:root {
  --about-infromation-acordion-title-fs: 28px;
  --about-infromation-acordion-text-fs: 20px;
  --about-infromation-acordion-content-title-fs: 26px;
  --about-infromation-acordion-content-link-fs: 20px;
  --about-infromation-acordion-content-teacher-fs: 24px;
}

@media (max-width: 900px) {
  :root {
    --about-infromation-acordion-title-fs: 24px;
    --about-infromation-acordion-text-fs: 18px;
    --about-infromation-acordion-content-title-fs: 22px;
    --about-infromation-acordion-content-link-fs: 18px;
    --about-infromation-acordion-content-teacher-fs: 20px;
  }
}

@media (max-width: 600px) {
  :root {
    --about-infromation-acordion-title-fs: 22px;
    --about-infromation-acordion-text-fs: 16px;
    --about-infromation-acordion-content-title-fs: 20px;
    --about-infromation-acordion-content-link-fs: 16px;
    --about-infromation-acordion-content-teacher-fs: 20px;
  }
}

@media (max-width: 550px) {
  :root {
    --about-infromation-acordion-title-fs: 20px;
    --about-infromation-acordion-text-fs: 14px;
    --about-infromation-acordion-content-title-fs: 18px;
    --about-infromation-acordion-content-link-fs: 14px;
    --about-infromation-acordion-content-teacher-fs: 18px;
  }
}

:root {
  --contacts-info-title-fs: 28px;
  --contacts-info-subtitle-fs: 22px;
  --contacts-info-social-size: 64px;
}

@media (max-width: 740px) {
  :root {
    --contacts-info-title-fs: 24px;
    --contacts-info-subtitle-fs: 18px;
    --contacts-info-social-size: 60px;
  }
}
@media (max-width: 480px) {
  :root {
    --contacts-info-title-fs: 20px;
    --contacts-info-subtitle-fs: 16px;
    --contacts-info-social-size: 50px;
  }
}

:root {
  --feedback-slider-text-fs: 18px;
  --feedback-slider-school-fs: 20px;
}

@media (max-width: 500px) {
  :root {
    --feedback-slider-text-fs: 16px;
    --feedback-slider-school-fs: 18px;
  }
}

:root {
  --footer-logo-width: 172px;
  --footer-logo-height: 64px;
  --footer-logo-mb: 48px;
  --footer-contacts-fs: 20px;
  --footer-nav-fs: 20px;
  --footer-politic-fs: 18px;
}

@media (max-width: 700px) {
  :root {
    --footer-logo-width: 238px;
    --footer-logo-height: 88px;
    --footer-logo-mb: 60px;
  }
}

@media (max-width: 600px) {
  :root {
    --footer-contacts-fs: 20px;
    --footer-nav-fs: 20px;
    --footer-politic-fs: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --footer-logo-width: 135px;
    --footer-logo-height: 51px;
    --footer-logo-mb: 32px;
    --footer-contacts-fs: 16px;
    --footer-nav-fs: 16px;
    --footer-politic-fs: 12px;
  }
}

:root {
  --form-title-fs: 47px;
  --form-input-fs: 16px;
  --form-button-fs: 20px;
  --form-aggree-fs: 15px;
}

@media (max-width: 900px) {
  :root {
    --form-title-fs: 40px;
  }
}
@media (max-width: 500px) {
  :root {
    --form-title-fs: 30px;
    --form-input-fs: 14px;
    --form-button-fs: 16px;
    --form-aggree-fs: 14px;
  }
}

:root {
  --links-text-fs: 21px;
}

@media (max-width: 400px) {
  :root {
    --links-text-fs: 18px;
  }
}

:root {
  --about-message-title-fs: 32px;
  --about-message-subtitle-fs: 24px;
  --about-message-bottom-fs: 20px;
}

@media (max-width: 744px) {
  :root {
    --about-message-title-fs: 30px;
    --about-message-subtitle-fs: 20px;
    --about-message-bottom-fs: 18px;
  }
}

@media (max-width: 580px) {
  :root {
    --about-message-title-fs: 28px;
    --about-message-subtitle-fs: 18px;
    --about-message-bottom-fs: 16px;
  }
}

@media (max-width: 420px) {
  :root {
    --about-message-title-fs: 24px;
    --about-message-subtitle-fs: 16px;
    --about-message-bottom-fs: 15px;
  }
}

:root {
  --description-cards-title-fs: 29px;
  --description-cards-subtitle-fs: 16px;
}

@media (max-width: 1200px) {
  :root {
    --description-cards-title-fs: 32px;
    --description-cards-subtitle-fs: 18px;
  }
}
@media (max-width: 640px) {
  :root {
    --description-cards-title-fs: 26px;
    --description-cards-subtitle-fs: 16px;
  }
}
@media (max-width: 500px) {
  :root {
    --description-cards-title-fs: 24px;
    --description-cards-subtitle-fs: 13px;
  }
}

:root {
  --diagnostic-steps-subtitle-fs: 30px;
  --diagnostic-steps-step-tag-fs: 30px;
  --diagnostic-steps-step-title-fs: 30px;
  --diagnostic-steps-step-description-fs: 20px;
  --diagnostic-steps-from-title-fs: 39px;
}

@media (max-width: 900px) {
  :root {
    --diagnostic-steps-subtitle-fs: 24px;
    --diagnostic-steps-step-tag-fs: 26px;
    --diagnostic-steps-step-title-fs: 26px;
    --diagnostic-steps-step-description-fs: 18px;
    --diagnostic-steps-from-title-fs: 36px;
  }
}

@media (max-width: 700px) {
  :root {
    --diagnostic-steps-subtitle-fs: 20px;
    --diagnostic-steps-step-tag-fs: 24px;
    --diagnostic-steps-step-title-fs: 24px;
    --diagnostic-steps-from-title-fs: 30px;
  }
}

@media (max-width: 600px) {
  :root {
    --diagnostic-steps-subtitle-fs: 18px;
    --diagnostic-steps-step-tag-fs: 20px;
    --diagnostic-steps-step-title-fs: 20px;
    --diagnostic-steps-from-title-fs: 28px;
  }
}

@media (max-width: 400px) {
  :root {
    --diagnostic-steps-subtitle-fs: 18px;
    --diagnostic-steps-step-tag-fs: 16px;
    --diagnostic-steps-step-title-fs: 16px;
    --diagnostic-steps-step-description-fs: 14px;
    --diagnostic-steps-from-title-fs: 24px;
  }
}

:root {
  --direction-subtitle-fs: 22px;

  --direction-card-tag-fs: 14px;
  --direction-card-title-fs: 26px;
  --direction-card-description-fs: 14px;
  --direction-button-fs: 20px;

  --direction-card-padding: 30px;
  --direction-card-tag-padding: 6px 16px;
}

@media (max-width: 1300px) {
  :root {
    --direction-subtitle-fs: 20px;
    --direction-card-tag-fs: 14px;
    --direction-card-title-fs: 24px;
    --direction-card-description-fs: 14px;

    --direction-card-padding: 20px;
    --direction-card-tag-padding: 6px 13px;
  }
}
@media (max-width: 1200px) {
  :root {
    --direction-card-tag-fs: 11px;
    --direction-card-title-fs: 20px;
    --direction-card-tag-padding: 4px 12px;
  }
}
@media (max-width: 640px) {
  :root {
    --direction-card-description-fs: 12px;
    --direction-card-padding: 18px;
  }
}
@media (max-width: 500px) {
  :root {
    --direction-subtitle-fs: 18px;
    --direction-card-title-fs: 18px;
    --direction-button-fs: 18px;
  }
}

:root {
  --direction-detail-tags-fs: 18px;
  --direction-detail-subtitle-fs: 20px;
  --direction-detail-image-size: 604px;
  --direction-detail-facts-fs: 32px;

  --direction-detail-cards-title-fs: 55px;
  --direction-detail-cards-subtitle-fs: 20px;
}

@media (max-width: 1200px) {
  :root {
    --direction-detail-facts-fs: 28px;
    --direction-detail-cards-title-fs: 48px;
  }
}

@media (max-width: 1040px) {
  :root {
    --direction-detail-facts-fs: 32px;
    --direction-detail-cards-title-fs: 55px;
    --direction-detail-image-size: 500px;
  }
}

@media (max-width: 780px) {
  :root {
    --direction-detail-facts-fs: 28px;
  }
}

@media (max-width: 700px) {
  :root {
    --direction-detail-tags-fs: 16px;
    --direction-detail-subtitle-fs: 18px;
    --direction-detail-image-size: 400px;
    --direction-detail-facts-fs: 24px;

    --direction-detail-cards-title-fs: 38px;
    --direction-detail-cards-subtitle-fs: 18px;
  }
}
@media (max-width: 500px) {
  :root {
    --direction-detail-tags-fs: 14px;
    --direction-detail-subtitle-fs: 16px;
    --direction-detail-image-size: 360px;
    --direction-detail-facts-fs: 20px;

    --direction-detail-cards-title-fs: 28px;
    --direction-detail-cards-subtitle-fs: 16px;
  }
}

@media (max-width: 440px) {
  :root {
    --direction-detail-tags-fs: 12px;
    --direction-detail-subtitle-fs: 14px;
    --direction-detail-image-size: 320px;
    --direction-detail-facts-fs: 16px;

    --direction-detail-cards-title-fs: 28px;
    --direction-detail-cards-subtitle-fs: 14px;
  }
}

:root {
  --features-title-fs: 24px;
  --features-subtitle-fs: 18px;
  --features-padding: 30px;
  --features-icon: 76px;
}

@media (max-width: 1300px) {
  :root {
    --features-title-fs: 22px;
    --features-subtitle-fs: 16px;
    --features-padding: 20px;
    --features-icon: 60px;
  }
}

@media (max-width: 640px) {
  :root {
    --features-title-fs: 20px;
    --features-subtitle-fs: 13px;
  }
}

:root {
  --hero-subtitle-fs: 33px;
  --hero-button-fs: 20px;
}

@media (max-width: 1300px) {
  :root {
    --hero-subtitle-fs: 40px;
    --hero-button-fs: 28px;
  }
}
@media (max-width: 640px) {
  :root {
    --hero-subtitle-fs: 24px;
    --hero-button-fs: 20px;
  }
}
@media (max-width: 500px) {
  :root {
    --hero-subtitle-fs: 22px;
    --hero-button-fs: 18px;
  }
}

:root {
  --join-request-audience-fs: 40px;
  --join-request-button-fs: 20px;
}

@media (max-width: 700px) {
  :root {
    --join-request-audience-fs: 30px;
    --join-request-button-fs: 16px;
  }
}

@media (max-width: 400px) {
  :root {
    --join-request-audience-fs: 20px;
    --join-request-button-fs: 12px;
  }
}

:root {
  --projectIncludes-title-fs: 26px;
  --projectIncludes-description-fs: 18px;
  --projectIncludes-tag-fs: 20px;
}

@media (max-width: 1240px) and (min-width: 1061px) {
  :root {
    --projectIncludes-title-fs: 24px;
    --projectIncludes-description-fs: 16px;
    --projectIncludes-tag-fs: 18px;
  }
}

@media (max-width: 744px) {
  :root {
    --projectIncludes-title-fs: 20px;
    --projectIncludes-description-fs: 16px;
    --projectIncludes-tag-fs: 16px;
  }
}

@media (max-width: 540px) {
  :root {
    --projectIncludes-title-fs: 16px;
    --projectIncludes-description-fs: 12px;
    --projectIncludes-tag-fs: 12px;
  }
}

:root {
  --puzzle-block-title-fs: 50px;
  --puzzle-block-mbt: 8px;
  --puzzle-block-lh: 50px;
  --puzzle-block-description-fs: 15px;
  --puzzle-block-description-lh: 15px;
}

@media (max-width: 1348px) and (min-width: 1120px) {
  :root {
    --puzzle-block-description-fs: 26px;
    --puzzle-block-description-lh: 26px;
  }
}

@media (max-width: 1120px) {
  :root {
    --puzzle-block-description-fs: 24px;
    --puzzle-block-description-lh: 24px;
  }
}
@media (max-width: 1040px) {
  :root {
    --puzzle-block-description-fs: 22px;
    --puzzle-block-description-lh: 22px;
  }
}
@media (max-width: 970px) {
  :root {
    --puzzle-block-description-fs: 20px;
    --puzzle-block-description-lh: 20px;
  }
}
@media (max-width: 900px) {
  :root {
    --puzzle-block-description-fs: 18px;
    --puzzle-block-description-lh: 18px;
  }
}
@media (max-width: 820px) {
  :root {
    --puzzle-block-description-fs: 16px;
    --puzzle-block-description-lh: 16px;
  }
}
@media (max-width: 780px) {
  :root {
    --puzzle-block-description-fs: 15px;
    --puzzle-block-description-lh: 15px;
  }
}
@media (max-width: 740px) {
  :root {
    --puzzle-block-description-fs: 14px;
    --puzzle-block-description-lh: 14px;
  }
}
@media (max-width: 700px) {
  :root {
    --puzzle-block-description-fs: 13px;
    --puzzle-block-description-lh: 13px;
  }
}

@media (max-width: 655px) {
  :root {
    --puzzle-block-title-fs: 28px;
    --puzzle-block-mbt: 6px;
    --puzzle-block-lh: 30px;
    --puzzle-block-description-fs: 12px;
    --puzzle-block-description-lh: 12px;
  }
}

@media (max-width: 540px) {
  :root {
    --puzzle-block-title-fs: 20px;
    --puzzle-block-mbt: 6px;
    --puzzle-block-lh: 22px;
    --puzzle-block-description-fs: 11px;
    --puzzle-block-description-lh: 11px;
  }
}
@media (max-width: 485px) {
  :root {
    --puzzle-block-title-fs: 18px;
    --puzzle-block-mbt: 4px;
    --puzzle-block-lh: 18px;
    --puzzle-block-description-fs: 10px;
    --puzzle-block-description-lh: 10px;
  }
}
@media (max-width: 440px) {
  :root {
    --puzzle-block-description-fs: 9px;
    --puzzle-block-description-lh: 9px;
  }
}
@media (max-width: 415px) {
  :root {
    --puzzle-block-description-fs: 8px;
    --puzzle-block-description-lh: 8px;
  }
}
@media (max-width: 375px) {
  :root {
    --puzzle-block-description-fs: 7px;
    --puzzle-block-description-lh: 7px;
  }
}

:root {
  --schools-subtitle-fs: 26px;
  --schools-padding: 100px 0px;

  --schools-map-title-fs: 48px;
  --schools-map-tags-fs: 20px;
  --schools-map-regions-fs: 20px;
  --schools-map-school-title-fs: 20px;
  --schools-map-school-list-fs: 14px;
}

@media (max-width: 800px) {
  :root {
    --schools-padding: 60px 0px;
    --schools-subtitle-fs: 24px;

    --schools-map-title-fs: 38px;
    --schools-map-tags-fs: 18px;
    --schools-map-regions-fs: 18px;
    --schools-map-school-title-fs: 18px;
    --schools-map-school-list-fs: 14px;
  }
}

@media (max-width: 700px) {
  :root {
    --schools-subtitle-fs: 16px;
    --schools-padding: 30px 0px;
    --schools-map-tags-fs: 14px;
    --schools-map-regions-fs: 14px;
    --schools-map-school-title-fs: 14px;
    --schools-map-school-list-fs: 14px;
  }
}

@media (max-width: 500px) {
  :root {
    --schools-subtitle-fs: 14px;
    --schools-map-title-fs: 25px;
    --schools-map-tags-fs: 12px;
    --schools-map-regions-fs: 12px;
    --schools-map-school-title-fs: 12px;
    --schools-map-school-list-fs: 12px;
  }
}

:root {
  --chart-subtitle-fs: 20px;
  --chart-classes-fs: 20px;
  --chart-classes-item-fs: 20px;
  --chart-charts-legend-fs: 14px;
  --chart-charts-percent-fs: 44px;
  --chart-charts-title-fs: 21px;
  --chart-charts-values-fs: 40px;
}

@media (max-width: 1200px) and (min-width: 800px) {
  :root {
    --chart-subtitle-fs: 24px;
  }
}

@media (max-width: 1200px) and (min-width: 580px) {
  :root {
    --chart-charts-legend-fs: 24px;
    --chart-charts-title-fs: 26px;
  }
}

@media (max-width: 440px) {
  :root {
    --chart-classes-fs: 18px;
    --chart-classes-item-fs: 18px;
    --chart-charts-legend-fs: 13px;
    --chart-charts-percent-fs: 35px;
    --chart-charts-title-fs: 20px;
    --chart-charts-values-fs: 33px;
  }
}

:root {
  --integration-process-title-fs: 20px;
  --integration-process-date-fs: 20px;
}

@media (max-width: 540px) {
  :root {
    --integration-process-title-fs: 18px;
    --integration-process-date-fs: 18px;
  }
}

:root {
  --schools-opportunities-title-fs: 40px;
  --schools-opportunities-subtitle-fs: 20px;
  --schools-opportunities-padding: 40px;
  --schools-opportunities-icon: 76px;
}

@media (max-width: 1300px) {
  :root {
    --schools-opportunities-title-fs: 30px;
    --schools-opportunities-padding: 30px;
    --schools-opportunities-icon: 60px;
  }
}

@media (max-width: 1100px) {
  :root {
    --schools-opportunities-title-fs: 24px;
    --schools-opportunities-subtitle-fs: 18px;
    --schools-opportunities-padding: 30px;
  }
}

@media (max-width: 1024px) {
  :root {
    --schools-opportunities-title-fs: 40px;
    --schools-opportunities-subtitle-fs: 24px;
    --schools-opportunities-padding: 40px;
    --schools-opportunities-icon: 76px;
  }
}

@media (max-width: 740px) {
  :root {
    --schools-opportunities-title-fs: 30px;
    --schools-opportunities-subtitle-fs: 20px;
    --schools-opportunities-padding: 30px;
    --schools-opportunities-icon: 60px;
  }
}

@media (max-width: 540px) {
  :root {
    --schools-opportunities-icon: 60px;
    --schools-opportunities-title-fs: 26px;
    --schools-opportunities-subtitle-fs: 18px;
  }
}

@media (max-width: 440px) {
  :root {
    --schools-opportunities-icon: 60px;
    --schools-opportunities-title-fs: 24px;
    --schools-opportunities-subtitle-fs: 16px;
  }
}

:root {
  --schools-hero-subtitle-fs: 29px;
  --schools-hero-button-fs: 20px;
}

@media (max-width: 1300px) {
  :root {
    --schools-hero-subtitle-fs: 40px;
    --schools-hero-button-fs: 28px;
  }
}

@media (max-width: 700px) {
  :root {
    --schools-hero-subtitle-fs: 29px;
    --schools-hero-button-fs: 24px;
  }
}

@media (max-width: 700px) {
  :root {
    --schools-hero-subtitle-fs: 24px;
    --schools-hero-button-fs: 20px;
  }
}

/* Font sizes */
:root {
  /*titles*/
  --h1-font-size: 78px;
  --h1-font-size-school: 83px;
  --h1-font-size-directions: 86px;
  --h2-font-size: 60px;
  --h2-font-size-opportunities: 60px;
  --h3-font-size: 50px;
  --h4-font-size: 48px;

  /*scale*/
  --font-scale: 1;
}

body[data-font-size="small"] {
  --font-scale: 0.6;
}

body[data-font-size="large"] {
  --font-scale: 1.3;
}

body[data-font-size="xlarge"] {
  --font-scale: 1.5;
}

@media (max-width: 1300px) {
  :root {
    --h1-font-size: 94px;
    --h4-font-size: 40px;
    --h1-font-size-directions: 86px;
  }
}

@media (max-width: 1124px) {
  :root {
    --h2-font-size-opportunities: 54px;
  }
}
@media (max-width: 800px) {
  :root {
    --h1-font-size-directions: 70px;
  }
}
@media (max-width: 700px) {
  :root {
    --h1-font-size-school: 70px;
  }
}
@media (max-width: 640px) {
  :root {
    --h1-font-size: 60px;
    --h2-font-size: 50px;
    --h2-font-size-opportunities: 50px;
    --h3-font-size: 40px;
    --h4-font-size: 36px;
    --h1-font-size-school: 60px;

    --h1-font-size-directions: 60px;
  }
}
@media (max-width: 540px) {
  :root {
    --h1-font-size-directions: 48px;
  }
}

@media (max-width: 500px) {
  :root {
    --h1-font-size: 50px;
    --h2-font-size: 34px;
    --h2-font-size-opportunities: 34px;
    --h3-font-size: 34px;
    --h4-font-size: 34px;
    --h1-font-size-school: 48px;
  }
}

@media (max-width: 400px) {
  :root {
    --h1-font-size: 40px;
    --h3-font-size: 28px;
    --h2-font-size: 28px;
    --h2-font-size-opportunities: 28px;
    --h4-font-size: 28px;
    --h1-font-size-school: 40px;

    --h1-font-size-directions: 40px;
  }
}