@use "../abstracts/" as *;

.faqs {
  .faq-list {
    @include flex($align: start, $direction: column, $gap: 25px);
    @include sm-down {
      gap: 20px;
    }
    .faq-list-item {
      width: 100%;
      background-color: $color-white;
      padding: 40px 75px;
      border: 1px solid $border-primary;
      border-radius: $radius-20;
      @include flex($align: center, $gap: 45px);

      &:nth-child(odd) {
        margin-inline-end: 75px;
        @include xxl-down {
          margin-inline-end: 50px;
        }

        @include xl-down {
          margin-inline-end: 0;
        }
      }
      &:nth-child(even) {
        margin-inline-start: 75px;
        @include xxl-down {
          margin-inline-start: 50px;
        }

        @include xl-down {
          margin-inline-start: 0;
        }
      }

      @include sxxl-down {
        padding: 30px 40px;
        gap: 30px;
      }

      @include sm-down {
        padding: 20px;
        gap: 20px;
      }
      @include xs-down {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .faq-list-icon {
        display: inline-block;
        @include sm-down {
          @include square(40px);
        }
      }

      .faq-list-content {
        > span {
          font-size: 26px;
          font-weight: 600;
          color: $text-primary;
          @include xxl-down {
            font-size: 20px;
          }
        }
        > p {
          font-size: 20px;
          @include xxl-down {
            font-size: 16px;
          }
        }
      }
    }
  }

  .faqs-accordion{
    padding: 20px;
    background-color: $card-bg;
    border: 1px solid $border-ternary;
    border-radius: $radius-24;
  }
}