.faq__container {
  display: flex;
  justify-content: space-between;
  padding: 48px 100px;
  z-index: 1;
  max-width: 1192px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  gap: 64px;
  &.left {
    flex-direction: row-reverse;
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  @media (max-width: 1400px) {
    padding: 48px 50px;
  }
  @media (max-width: 1000px) {
    padding: 32px 16px;
  }
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 24px;
  }
}

.faq__header {
  display: flex;
  position: relative;
  flex-direction: column;
  &.light {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: white;
      margin-bottom: 8px;
    }
    p,
    ul li {
      color: #ffffffbf;
    }
    span.subheader {
      color: rgba(255, 255, 255, 0.5);
      svg {
        path {
          fill: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
  @media (max-width: 768px) {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  img {
    width: 100%;
    max-width: 276px;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 16px;
    @media (max-width: 768px) {
      position: relative;
      object-position: top;
      max-height: 600px;
      margin-top: 0;
    }
  }
}
.faq__points {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq__content {
  width: 584px;
  min-width: 584px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  @media (max-width: 768px) {
    width: 100%;
    min-width: 0;
    padding: 0px;
  }
  &.light {
    .faq__item {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: white;
        margin-bottom: 8px;
      }
      p,
      ul li {
        color: #ffffffbf;
      }
      p.title {
        color: white;
        &::after,
        &::before {
          background-color: white;
        }
      }
    }
  }
  .faq__item {
    border-bottom: 1px solid #3c3646;
    padding: 16px 8px;
    &:last-child {
      padding: 16px 8px;
      padding-bottom: 0;
      border-bottom: 0;
    }
    div.desc {
      opacity: 0;
      height: 0;
      transition: 0.3s;
    }
    &.active {
      div.desc {
        opacity: 1;
        height: auto;
      }
    p.title::before {
      opacity: 0;
    }

    }
    p.title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 600;
      margin-bottom: 8px;
      gap: 8px;
      cursor: pointer;
      &::after {
        content: "";
        width: 14px;
        height: 2px;
        background-color: #191325;
        display: block;
        min-width: 14px;
      }
      &::before {
        content: "";
        width: 14px;
        height: 2px;
        background-color: rgba(2, 2, 2, 0.9019607843);
        display: block;
        position: absolute;
        transform: rotate(90deg);
        right: 0px;
        transition: 0.3s;
      }
    }
  }
}