/* ======================================================================================== */
/* VARIABLES */
/* ======================================================================================== */

:root {
  /* Colours */
  --body-color: #585858;
  --title-color: #b11623;

  /* Fonts */
  --primary-font-family: "Switzer";
  --secondary-font-family: "Tanker";

  /* Typography */

  /* --fs100: clamp(64px, 4vw + 3rem, 100px);
  --fs50: clamp(32px, 2vw + 1.5rem, 50px);
  --fs35: clamp(23px, 1.4vw + 1rem, 35px);
  --fs25: clamp(16px, 1vw + 0.8rem, 25px);
  --fs22: clamp(14px, 0.9vw + 0.72rem, 22px);
  --fs20: clamp(13px, 0.8vw + 0.65rem, 20px);
  --fs18: clamp(12px, 0.7vw + 0.6rem, 18px);
  --fs16: clamp(11px, 0.6vw + 0.55rem, 16px);
  --fs13: clamp(9px, 0.5vw + 0.4rem, 13px); */

  --fs100: clamp(52px, 4vw + 3rem, 90px);
  --fs50: clamp(32px, 2vw + 1.5rem, 45px);
  --fs35: clamp(23px, 1.4vw + 1rem, 30px);
  --fs25: clamp(16px, 1vw + 0.8rem, 22px);
  --fs22: clamp(14px, 0.9vw + 0.72rem, 20px);
  --fs20: clamp(13px, 0.8vw + 0.65rem, 18px);
  --fs18: clamp(12px, 0.7vw + 0.6rem, 16px);
  --fs16: clamp(11px, 0.6vw + 0.55rem, 15px);
  --fs13: clamp(9px, 0.5vw + 0.4rem, 12px);

  --p1-rem: clamp(0.5rem, 0.75vw + 0.25rem, 1rem);
  --p2-rem: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  --p3-rem: clamp(1.5rem, 2.25vw + 0.75rem, 3rem);
  --p4-rem: clamp(2rem, 3vw + 1rem, 4rem);
  --p5-rem: clamp(2.5rem, 3.75vw + 1.25rem, 5rem);
  --p6-rem: clamp(3rem, 4.5vw + 1.5rem, 6rem);
  --p8-rem: clamp(4rem, 6vw + 2rem, 8rem);
  /* --p2-rem: 2rem; */
  /* --p4-rem: 4rem; */

  --default-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
}

/* ======================================================================================== */
/* Global Styles */
/* ======================================================================================== */

body {
  font-display: swap;
  color: var(--body-color);
  font-family: var(--primary-font-family), var(--default-font-family);
  font-size: var(--fs20);
  line-height: 125%; /* 35px */
  margin: 0;
  padding: 0;
}

main {
  padding: var(--fs50);
  overflow-x: hidden;
}

section {
  margin-bottom: var(--p6-rem);
}

a {
  color: currentColor;
  text-decoration: none;
}

a:hover {
  color: var(--title-color);
  text-decoration: underline;
}

ol {
  margin: 0;
}

h1 {
  padding: 0;
  margin: 0;
  font-family: var(--secondary-font-family), var(--default-font-family);
  font-size: var(--fs100);
  font-weight: 400;
  line-height: 100%;
  color: var(--title-color);
}

h2 {
  padding: 0;
  margin: 0;
  margin-bottom: var(--p1-rem);
  font-family: var(--secondary-font-family), var(--default-font-family);
  font-size: 40px;
  font-weight: 400;
  line-height: 103%; /* 65.92px */
  position: relative;
  color: var(--title-color);
}

/* h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -35px;

  width: 100%;
  height: 25px;

  background-image: url("/img/title-underline.svg");
  background-repeat: no-repeat;
  background-size: 70px auto;
} */

.title {
  color: var(--title-color);
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 118%; /* 47.2px */
}

figure {
  margin: 0;
}

figcaption {
  color: #767676;
  font-size: var(--fs13);
}

@media (max-width: 768px) {
  h2::after {
    background-size: 60px auto;
  }

  h2 {
    margin-top: 4rem;
    font-size: 30px;
  }

  .title {
    font-size: 18px;
  }

  main {
    padding: var(--fs35);
  }

}