:root {
      --black: #050810;
      --dark-blue: #051D79;
      --dark-gray: #3E4854;
      --dark-green: #42CA79;
      --purple: #5024FF;
      --light-blue: #58BCFA;
      --green: #7FE7A8;
      --warm-gray: #CAC9C5;
      --pink: #D0009D;
      --cool-gray: #E7EAEF;
      --dark-yellow: #F1BA60;
      --light-yellow: #FFEDB4;

      --font-size-lg: 3.375rem; /* 54px */
      --font-size-m: 1.75rem; /* 28px */
      --font-size-s: 1.375rem; /* 22px */
      --font-size-xs: 1rem; /* 16px */

      --font-family-primary: Inter;
      --font-family-secondary: BricolageGrotesque;

      --font-letter-spacing-s: 3px;
      --font-letter-spacing-xs: 2px;

    }

    @font-face {
      font-family: Inter;
      src: url(./fonts/Inter-VariableFont_opsz\,wght.ttf);
    }
    @font-face {
      font-family: BricolageGrotesque;
      src: url(./fonts/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf);
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      color: var(--black);
      font-family: var(--font-family-primary);
    }
    h1, h2, h3, p {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      font-family: var(--font-family-secondary);
      font-size: var(--font-size-lg);
      font-weight: 400;
      line-height: 122.222%;
    }

    h2 {
      font-family: var(--font-family-secondary);
      font-size: var(--font-size-m);
      font-weight: 700;
      line-height: 122.222%;
      letter-spacing: var(--font-letter-spacing-xs);
    }
    
    h3 {
      font-family: var(--font-family-secondary);
      font-size: var(--font-size-m);
      font-weight: 300;
      line-height: 150%;
    }

    .body-lg {
      font-family: var(--font-family-primary);
      font-size: var(--font-size-s);
      font-weight: 400;
      line-height: 163.636%;

      .bold {
        color: var(--pink);
        font-weight: 700;
      }
    }

    .body {
      font-family: var(--font-family-primary);
      font-size: var(--font-size-xs);
      font-weight: 400;
      line-height: 175%;

      .bold {
        font-weight: 700;
      }

    }

    .body-caps {
      font-family: var(--font-family-primary);
      font-size: var(--font-size-xs);
      color: var(--pink);
      font-weight: 700;
      line-height: 162.5%;
      text-transform: capitalize;
      letter-spacing: var(--font-letter-spacing-s);
    }
    .body-list {
      text-wrap-style: pretty;
    }

    .quote {
      font-weight: 300;
      font-style: Italic;
      font-size: 1.5rem;
      line-height: 158.334%;
    }

    .image {
      border-radius: 64px;
    }

    .full-width {
      grid-column: col-start / span 12;
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      gap: 16px;
    }

    .width-3 {
      grid-column: col-start / span 3;
    }
    .width-4 {
      grid-column: col-start / span 4;
    }
    .width-5 {
      grid-column: col-start / span 5;
    }

    .mb-8 {
      margin-bottom: .5rem;
    }
    .mb-16 {
      margin-bottom: 1rem;
    }
    .mb-24 {
      margin-bottom: 1.5rem;
    }
    .mb-32 {
      margin-bottom: 2rem;
    }
    .mb-40 {
      margin-bottom: 2.5rem;
    }
    .mb-72 {
      margin-bottom: 4.5rem;
    }
    .mb-132 {
      margin-bottom: 8.5rem;
    }


    .image-container {
      grid-column: col-start 7 / span 6;
      position: relative;
      /* background-color:var(--green); */
    }

    .image-container > img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 64px;
      box-shadow: 20px 23px 24px 2px #00000026;
    }


    .container {
      /* background-color: lightblue; */
      width: calc(1600px - 112px);
      margin: 0 auto;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      column-gap: 1rem;

    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      height: 136px;
      font-size: 1.625rem; /* 26px */
      font-family: Inter;
      padding-top: 42px;
    }

    .nav {
      display: flex;
      gap: 80px;
      font-weight: 500;
      a {
        color: inherit;
        text-decoration: none;

        &.current-page {
          border-bottom: 8px solid var(--purple);
          line-height: 100%;
          padding-bottom: 11px;
        }

      }
    }

    .challenge-item {
      display: flex;
      margin-bottom: 1.5rem;
      > img {
        margin: 0 1.5rem 1.5rem 1.5rem;
      }
    }

    .mission-image {
      height: 519px;
      position: relative;
      > img {
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .stat {
      width: 154px;
      height: 95px;
      background-color: var(--cool-gray);
      box-shadow: 20px 23px 24px 2px #00000026;
      border-radius: 84px;
      margin-right: 4rem;

      .stat-content {
        height: 100%;
        width: 100%;
        white-space: nowrap ;
        margin: -10px 0 0 -10px
      }
      .stat-number {
        font-family: var(--font-family-secondary);
        font-size: var(--font-size-lg);
        font-weight: 400;
        line-height: 122.222%;
        color: var(--pink)
      }

    }