.bd-page-components-overview {
  width: 100vw;

  &-container {
    margin: var(--spacing-xxl) auto;
    display: flex;
    flex-direction: column;
    width: 90%;

    @include media('large') {
      margin: 80px auto;
      display: grid;
      grid-template-areas: 'sidebar main';
      grid-template-columns: minmax(max-content, auto) minmax(490px, 992px);
      column-gap: var(--spacing-m);
    }

    @include media('xlarge') {
      max-width: var(--max-content-width);
    }

    &__main {
      grid-area: main;
      position: relative;
      z-index: 50;

      .bd-page-components-overview-background {
        position: absolute;
        object-fit: contain;
        opacity: 0.1;
        top: 0;
        right: -25%;
        transform: rotate(160deg) rotateY(180deg) scale(1.6);
        z-index: -1;
        user-select: none;
        pointer-events: none;

        @include media('medium') {
          top: 1%;
          transform: rotate(160deg) rotateY(180deg) scale(4);
        }
      }

      h1 {
        font-weight: var(--bold);
        font-size: var(--font-size-34);
        line-height: 1.18;
        letter-spacing: -0.5px;

        @include media('xlarge') {
          font-size: var(--font-size-48);
        }
      }

      h2 {
        font-size: var(--font-size-26);
        letter-spacing: -0.2px;
        line-height: 1.23;

        @include media('xlarge') {
          font-size: var(--font-size-34);
        }
      }
    }
  }
}

.bd-cards {
  margin: var(--spacing-xxl) 0;

  h2 {
    margin-block-end: var(--spacing-m);

    @include media('medium') {
      margin-block-end: var(--spacing-xl);
    }
  }

  .bd-card {
    display: grid;
    gap: var(--spacing-xs);
    grid-row: 1;
    grid-template-rows: min-content auto;

    @include media('medium') {
      grid-row: auto;
      height: auto;
    }

    &-group {
      --spacer-inline: calc(var(--spacing-xs) * 1.25);
      display: grid;
      gap: var(--spacing-m);
      grid-auto-columns: 80%;
      left: calc(var(--spacer-inline) * -1);
      overflow-x: scroll;
      padding: var(--spacing-l) var(--spacer-inline);
      position: relative;
      scroll-snap-type: x proximity;
      width: 103vw;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    &-group-column {
      display: grid;
      gap: var(--spacing-xxs);
    }

    &-group,
    &-group-column {
      @include media('medium') {
        gap: var(--spacing-m);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        left: unset;
        overflow: visible;
        padding: unset;
        width: 100%;
      }

      @include media('xlarge') {
        grid-template-columns: repeat(3, minmax(auto, 300px));
        grid-template-rows: 1fr 1fr;
      }
    }

    &__title {
      font-size: var(--font-size-18);
      font-weight: var(--bold);
      line-height: 1.14;
      color: inherit;

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

    &__body {
      font-size: 14px;
      font-weight: var(--normal);
      line-height: 1.71;
      letter-spacing: 0.2px;
      color: inherit;
    }

    &--guide {
      align-items: center;
      grid-column: 1;
      grid-row: auto;
      grid-template-columns: 1fr 4fr;
      grid-template-rows: 1fr;

      .bd-card__title {
        color: var(--maastricht-blue);
        font-size: 16px;
        line-height: 1.5;

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

      @include media('medium') {
        align-items: start;
        grid-column: auto;
        font-size: var(--font-size-18);
      }
    }
  }
}

.bd-components-list {
  ul {
    color: var(--independence);
    margin: 0;
    padding: 0;

    li:not(:last-of-type) {
      border-block-end: solid 2px var(--bright-gray);
    }
  }

  h3 {
    font-size: var(--font-size-18);
    font-weight: var(--bold);
    line-height: 1.33;
    margin: var(--spacing-xl) 0 var(--spacing-s);

    @include media('xlarge') {
      font-size: var(--font-size-21);
      margin: var(--spacing-xxl) 0 var(--spacing-l);
    }
  }

  h4 {
    font-size: 14px;
    font-weight: var(--bold);
    letter-spacing: 0.2px;
    line-height: 1.71;
    margin: var(--spacing-xs) 0 var(--spacing-xxs);
  }

  .bd-link,
  p {
    margin-block-end: var(--spacing-xs);
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.2px;
  }

  a:not([class]) {
    &:hover {
      color: var(--burnt-sienna);
    }
  }

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

    li {
      display: flex;
      justify-content: space-between;

      p {
        width: 60%;
      }

      p {
        margin: var(--spacing-xs) 0;
      }
    }
    #bd-toc {
      display: none;
    }
  }
}

.bd-iframe-container {
  width: 100%;
  min-height: 200px;
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;

  iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
