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

  .grid-container {
    @include backgrd('@/Images/lines-backgrd.svg');

    background-position: top;
  }

  &__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);
        display: grid;
        row-gap: $spacing-xsm;
      }
    }

    &-right {
      display: grid;
      row-gap: $spacing-xs;
      @include col-span('full');
    }

    &-bottom {
      display: flex;
      flex-wrap: wrap;
      padding: $spacing-sm $spacing-lg;
      justify-content: space-between;
      gap: $spacing-sm;
      @include col-span('full');

      &-links {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-xs $spacing-lg;
        align-items: center;
      }
    }

    &:has(.block-faqs__content-left) {
      .block-faqs__content-right {
        @include col-span(7);

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

  .accordion {
    &-wrap {
      display: grid;
      border-radius: 2px;
      border: 1px solid $color-black20;
    }

    &-label {
      position: relative;
      display: flex;
      width: calc(100% - 20px);
      margin: 10px;
      padding: 10px;
      border-radius: 2px;
      background-color: transparent;
      text-align: left;
      column-gap: $spacing-sm;
      justify-content: space-between;
      align-items: center;
      transition: $transition-default;
      transition-property: background-color;
      @include icon('@/Images/icons/plus.svg', 16px);
      @extend %heading-6;
      @include btn-focus-visible;

      &::after {
        flex: 0 0 auto;
      }
    }

    &-panel {
      padding: 0 $spacing-smd;
      margin-top: 0;
      @include accordion;

      &-content {
        display: grid;
        column-gap: $spacing-xs;
        overflow: hidden;
        transition: $transition-default;
        transition-property: padding-bottom, margin-top;

        .card {
          position: relative;
          display: flex;
          width: 100%;
          padding: $spacing-sm;
          margin: $spacing-sm 0 0;
          background-color: $color-black5;
          flex-direction: column;
          row-gap: $spacing-sm;

          &-info {
            display: grid;
            gap: $spacing-xs;
          }

          &-links {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-xsm $spacing-lg;

            &:has(:nth-child(3)) {
              flex-direction: column;
            }
          }

          &-brush {
            display: none;
          }
        }
      }
    }

    &--open {
      .accordion {
        &-label {
          background-color: $color-teagreen;
          @include icon('@/Images/icons/minus.svg', 16px);
        }

        &-panel {
          @include accordion-open;

          &-content {
            // margin-top: -$spacing-xs;
            padding-bottom: $spacing-smd;
          }
        }
      }
    }
  }
}