@font-face {
    font-family: 'StudioPro-Semibold';
    src: url(../font/StudioPro-SemiBold.woff2) format('woff2'),
    url(../font/StudioPro-SemiBold.woff) format('woff');
}
  
@font-face {
  font-family: 'StudioPro-SemiboldItalic';
  src: url(../font/StudioPro-SemiBoldItalic.woff2) format('woff2'),
        url(../font/StudioPro-SemiBoldItalic.woff) format('woff');
}

html {
    font-family: 'StudioPro-Semibold', sans-serif;
    font-weight: 400;
    color: white;
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-feature-settings: 'ss02', 'ss10';
  letter-spacing: .007em;
}

i, em {
  font-family: 'StudioPro-SemiboldItalic', sans-serif;
}

.section__appendix,
.section__text.big,
section[class*="section__"] h1,
h3,
.accordion-header,
.section__accordion tr td:first-of-type, .section__text h3 {
  font-size: 26px;
  line-height: 28px;
}

.text__size--bigger {
  font-size: 50px;
  line-height: 52px;
}

section h1.section__branding {
  font-size: 120px;
  line-height: 126px;
}

footer,
.project__description,
.header,
.swiper {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.section__headline {
  text-align: center;
}

sup {
  font-size: 80%;
  top: -3px;
  position: relative;
}

@media (max-width: 1920px) {
  .text__size--bigger {
    font-size: 42px;
    line-height: 44px;
  }
  
  section h1.section__branding {
    font-size: 90px;
    line-height: 93px;
  }
  
}

@media (max-width: 1280px) { 
  section h1.section__branding {
    font-size: 60px;
    line-height: 62px;
  }

  .text__size--bigger {
    font-size: 35px;
    line-height: 37px;
  }

  .section__appendix,
  .section__text.big,
  section[class*="section__"] h1,
  h3,
  .accordion-header,
  .section__accordion tr td:first-of-type, .section__text h3 {
    font-size: 24px;
    line-height: 26px;
  }

  section h1.section__branding {
    font-size: 50px;
    line-height: 52px;
  }
}

@media (max-width: 1024px) {  
  .section__appendix,
  .section__text.big,
  .text__size--bigger,
  section[class*="section__"] h1,
  h3,
  .accordion-header,
  .section__accordion tr td:first-of-type, .section__text h3 {
    font-size: 18px;
    line-height: 20px;
  }

  section h1.section__branding {
    font-size: 40px;
    line-height: 42px;
  }

  sup {
    top: -2px;
  }
}

@media (max-width: 768px) { 
  .section__appendix,
  .section__text.big,
  .text__size--bigger,
  section[class*="section__"] h1,
  h3,
  .accordion-header,
  .section__accordion tr td:first-of-type, .section__text h3 {
    font-size: 16px;
    line-height: 18px;
  }

  section h1.section__branding {
    font-size: 30px;
    line-height: 32px;
  }
}

@media (max-width: 400px) {
  section h1.section__branding {
    font-size: 28px;
    line-height: 30px;
  }
}