.block-card-scroller {
  inline-size: 100%;
  background-color: $color-white;

  .grid-container {
    display: grid;
    row-gap: $spacing-xl;
  }

  &__title {
    width: 100%;
    max-width: $width-md;
  }

  &__content {
    @include grid-cols(12);

    row-gap: $spacing-xl;

    &-left {
      @include col-span(5);

      @include media-down(lg) {
        @include col-span('full');
      }

      &-box {
        position: sticky;
        top: calc(var(--header-top) + $spacing-lg);
      }
    }

    &-right {
      @include col-span(7);

      @include media-down(lg) {
        @include col-span('full');
      }

      &-cards {
        width: 100%;
      }
    }
  }

  .card {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    width: 85%;
    height: auto;
    padding: $spacing-xxl;
    margin-bottom: negative($spacing-xl);
    z-index: 1;
    
    .icon {
      display: block;
      width: 24px;
      height: 24px;
      cursor: pointer;
      @include maskimg('@/Images/icons/arrow-right.svg', 24px);
    }

    &:nth-child(even) {
      float: right;
    }

    &:last-child {
      margin-bottom: 0;
    }

    @include media-down(sm) {
      width: 95%;
      padding: $spacing-xxl $spacing-lg;
      margin-bottom: negative($spacing-xl);
    }
  }
}