.bd-theme--light {
  z-index: 10;
}

.bd-page-get-started {
  $spacing-small: calc(var(--spacing-xxl) * 1.5);
  $spacing-big: calc(var(--spacing-xxl) * 3.125);
  position: relative;
  row-gap: $spacing-small;

  @include media('medium') {
    row-gap: $spacing-big;
  }

  &__background {
    position: absolute;
    z-index: -1;
    opacity: 0.1;
    left: -8%;
    top: 56%;
    transform: rotate(215deg) scale(2.5);

    @include media('medium') {
      left: 0;
      top: 45%;
      transform: rotate(215deg) scale(5);
    }
  }

  p {
    font-size: var(--font-size-16);
    line-height: 2;
    color: var(--independence);
    font-weight: var(--light);

    @include media('medium') {
      font-size: var(--font-size-18);
      line-height: 1.78;
    }
  }

  .bd-stage {
    &__bg-image {
      transform: rotate(30deg) scale(2.2);

      @include media('medium') {
        right: -25%;
        transform: rotate(30deg) scale(3);
      }

      @include media('large') {
        right: -20%;
        transform: rotate(30deg) scale(4.5);
      }

      @include media('xlarge') {
        right: -5%;
      }
    }

    h1 {
      font-weight: 280;
      width: auto;
      line-height: 1.14;
      letter-spacing: normal;

      @include media('medium') {
        font-weight: var(--extra-light);
        line-height: 1.1;
        letter-spacing: -1.5px;
        width: 75%;
      }

      @include media('large') {
        width: 55%;
      }
    }

    p {
      width: auto;
      @include media('medium') {
        width: 60%;
      }

      @include media('large') {
        width: 55%;
      }
    }
  }

  .bd-steps {
    h2 {
      width: auto;
      font-size: var(--font-size-21);
      line-height: 1.14;
      letter-spacing: normal;

      @include media('medium') {
        width: 50%;
        font-size: var(--font-size-26);
        line-height: 1.23;
        letter-spacing: -0.2px;
      }
    }

    &__grid {
      display: grid;
      gap: var(--spacing-xl);
      grid-template-rows: repeat(4, auto);
      margin-block-start: var(--spacing-xl);
      width: auto;

      @include media('medium') {
        grid-template-columns: repeat(4, 1fr);

        .bd-step-1 {
          grid-column: 1 / span 3;
          grid-row: 1;
        }
        .bd-step-2 {
          grid-column: 2 / span 3;
          grid-row: 2;
        }
        .bd-step-3 {
          grid-column: 1 / span 3;
          grid-row: 3;
        }
        .bd-step-4 {
          grid-column: 2 / span 3;
          grid-row: 4;
        }
      }

      @include media('large') {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        margin-block-start: var(--spacing-xxl);

        .bd-step-1,
        .bd-step-2,
        .bd-step-3,
        .bd-step-4 {
          grid-column: auto;
          grid-row: auto;
        }
      }

      @include media('xlarge') {
        gap: calc(var(--spacing-xxl) * 2);
      }

      .bd-step {
        display: grid;
        column-gap: var(--spacing-xs);
        grid-template-areas: 'image number' 'image description';
        grid-template-rows: 7ch auto;

        @include media('medium') {
          column-gap: var(--spacing-m);
        }

        @include media('large') {
          column-gap: var(--spacing-s);
        }

        @include media('xlarge') {
          column-gap: var(--spacing-m);
          grid-template-columns: 1fr 3fr;
        }

        picture {
          grid-area: image;
          margin-block-start: 0;
        }

        &__number {
          color: var(--maastricht-blue);
          font-size: var(--font-size-48);
          font-weight: var(--bold);
          grid-area: number;
          letter-spacing: -1px;
          line-height: 1.17;
          margin-block: auto 0;

          @include media('medium') {
            font-size: var(--font-size-56);
            line-height: 1.14;
          }
        }

        &__description {
          grid-area: description;
          font-weight: var(--bold);
          line-height: 1.33;
          color: var(--maastricht-blue);
        }
      }
    }
  }

  .bd-section {
    p ~ p {
      margin-block-start: var(--spacing-xs);
    }

    strong {
      display: block;
      margin-block-start: var(--spacing-xs);
      font-weight: var(--semi-bold);
    }

    strong > code,
    p > code {
      background-color: var(--bright-gray);
      border-radius: 2px;
      color: var(--independence);
      font-family: var(--font-mono);
      font-size: inherit;
      font-weight: var(--medium);
      letter-spacing: 0.2px;
      line-height: 2;
      padding: 0 2px;

      @include media('medium') {
        padding: 2px 8px;
      }
    }

    .bd-react-sample,
    .bd-web-component-sample {
      margin-block-start: var(--spacing-xl);

      @include media('medium') {
        margin-block-start: var(--spacing-xxl);
        margin-inline-start: calc(var(--spacing-xxl) * 2.125);
      }

      h3 {
        font-size: var(--font-size-18);
        line-height: 1.33;

        @include media('medium') {
          font-size: var(--font-size-21);
          line-height: 1.14;
        }
      }

      &__code {
        margin-block-start: var(--spacing-s);
      }

      .spacer-xxl {
        margin-block-start: var(--spacing-xxl);
      }
    }

    @include media('large') {
      .bd-react-sample {
        margin-block-start: calc(var(--spacing-xxl) * 1.3);
        margin-inline-start: var(--spacing-xxl);
      }

      .bd-web-component-sample {
        margin-block-start: calc(var(--spacing-xxl) * 2);
        margin-inline-start: var(--spacing-xxl);
      }
    }
  }

  .bd-browser-support {
    gap: var(--spacing-xxl);
    flex-direction: column-reverse;

    @include media('large') {
      flex-direction: row;
    }

    strong {
      display: initial;
    }
  }

  .bd-contribute {
    gap: var(--spacing-xxl);
    margin-block-end: $spacing-big;
  }
}

.bd-discover-more {
  display: flex;
  padding-block: 11ch;
  background: #08777c;

  &__container {
    margin: auto;
    width: 65%;

    h2 {
      color: var(--white);
      font-weight: var(--semi-bold);
      font-size: var(--font-size-34);
      line-height: 1.18;
      letter-spacing: -0.5px;
      text-align: center;

      @include media('medium') {
        font-size: var(--font-size-56);
        line-height: 1.14;
        letter-spacing: -1px;
      }

      @include media('xxlarge') {
        margin: auto;
        width: 60%;
      }
    }

    a {
      display: table;
      margin: var(--spacing-xl) auto 0;
    }
  }
}
