/* Font faces */

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Regular.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Thin.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Extralight.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Light.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Medium.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Bold.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Extrabold.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Cabinet Grotesk'), url('https://fonts.cdnfonts.com/s/85514/CabinetGrotesk-Black.woff') format('woff');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Header */

.h1 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 67.2px;
  font-display: swap;
}

@media (max-width: 767px) {
  .h1 {
    font-size: 38px;
    line-height: 45.6px;
  }
}

.h2 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

@media (max-width: 767px) {
  .h2 {
    font-size: 28px;
    line-height: 33.6px;
  }
}

.h3 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 33.6px;
}

@media (max-width: 767px) {
  .h3 {
    font-size: 24px;
    line-height: 28.8px;
  }
}

.h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 33.6px;
}

@media (max-width: 767px) {
  .h4 {
    font-size: 22px;
    line-height: 30.8px;
  }
}

.h5 {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px;
}

/* Subtitle */

.subtitle {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

@media (max-width: 767px) {
  .subtitle {
    font-size: 18px;
    line-height: 25.2px;
  }
}

/* Body */

.body1-regular {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

.body1-semibold {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.body2-regular {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.body2-medium {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.body2-underline {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-decoration: underline;
}

.body2-semibold {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.body2-italic {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

.body3-regular {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.body3-medium {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
}

.body3-semibold {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
}

.body3-italic {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 21px;
}

/* Button */

.button-large {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.02em;
}

.button-medium {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.02em;
}

.button-small {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 15.4px;
}

/* Overline */

.overline {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.03em;
}

/* Small */

.small {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}