@mixin background-image {
  display: block;
  position: absolute;
  z-index: -1;
  object-fit: contain;
  opacity: 0.1;
}

.bd-page-home {
  $spacing-small: calc(var(--spacing-xxl) * 1.5);
  $spacing-big: calc(var(--spacing-xxl) * 3.125);

  .bd-theme--dark .bd-page__container {
    margin-block-end: $spacing-big;
    row-gap: $spacing-small;

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

  .bd-theme--light .bd-page__container {
    padding-block-start: $spacing-small;

    @include media('medium') {
      padding-block-start: $spacing-big;
    }
  }

  .bd-stage .bd-button-group {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: var(--spacing-s);

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

  .bd-frameworks,
  .bd-why-bento {
    gap: var(--spacing-xl);

    @include media('medium') {
      .bd-row__column {
        width: 70%;
      }

      .bd-row__column:nth-child(1) {
        margin-inline-end: auto;
      }

      .bd-row__column:nth-child(2) {
        margin-inline-start: auto;
      }
    }
  }

  .bd-why-bento {
    @include media('large') {
      flex-direction: row-reverse;
    }
  }

  .bd-demo-intro {
    position: relative;
    width: 100%;

    &__image {
      display: none;

      @include media('large') {
        @include background-image;
        right: -10%;
        top: 100%;
        transform: rotateY(180deg) scale(4);
      }
    }
  }

  .bd-latest-news {
    margin: $spacing-small 0;
    position: relative;
    z-index: 50;

    @include media('medium') {
      margin: $spacing-big 0;

      .bd-row__column {
        width: 70%;
        z-index: 100;
      }
    }

    &__bg-image {
      &--left {
        display: none;
        @include media('medium') {
          @include background-image;
          top: 50%;
          left: -20%;
          transform: rotateY(180deg) scale(3.5);
        }
      }

      &--right {
        display: none;
        @include media('medium') {
          @include background-image;
          top: 25%;
          right: -20%;
          transform: rotateY(180deg) scale(3.5);
        }
      }
    }
  }
}
