faq.scss

.faq {
  &__main-content {
    background: no-repeat url('/assets/images/faq/Cloud-1.webp'),
                linear-gradient(132deg, $palianytsia 8.4%, $buzok 52.42%, $sky-ua 93.77%);
    background-blend-mode: luminosity;
    background-position: top 87px left 0, top 0 left 0;
    position: relative;

    &::after {
      bottom: -10%;
      content: url('/assets/images/faq/Cloud-2.webp');
      filter: blur(5px);
      position: absolute;
      right: 0;
      mix-blend-mode: luminosity;
      z-index: 1;
    }
  }

  &__table {
    border: 1px solid $black_sea;
    border-bottom: none;
  }

  details {
    user-select: none;
    overflow: hidden;

    &[open] + .faq__detail-description {
      border-bottom-color: $black_sea;
      transition: max-height 1000ms ease-out, border-bottom 0ms linear;
    }
    &[open] + .faq__detail-description.small { max-height: 300px }
    &[open] + .faq__detail-description.normal { max-height: 450px }
    &[open] + .faq__detail-description.large { max-height: 800px }
  }

  &__summary {
    color: $black_sea;
    cursor: pointer;
    font-family: 'FixelText-Bold';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    list-style: none;
    padding: 22px 32px;
    text-align: justify;
    text-transform: uppercase;
  }

  &__detail-description {
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    border-top: 1px solid $black_sea;
    max-height: 0;
    overflow: hidden;
    transition: max-height 500ms ease-out, border-bottom 0ms 500ms linear;
    .description { margin: 21px 10px 33px 63px}
    p, li { text-align: left; }
  }
  ul { margin: 0 0 0 10px; }

  &__bottom-info {
    background: linear-gradient(116deg, $purple-heart 0%, $sky-ua 100%);
    box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, 0.25);

    .wrapper {
      align-items: center;
      display: flex;
      justify-content: space-around;
    }
  }
  &__gift { mix-blend-mode: luminosity; }
}

@media (max-width: 1440px) {
  .faq__table {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 930px) {
  .faq {
    &__bottom-info {
      .wrapper { flex-direction: column; }

      .button {
        margin-top: 0;
        margin-bottom: 2em;
      }
    }
    &__gift { margin-bottom: 24px; }
  }
}

@media (max-width: 767px) {
  .faq {
    &__main-content {
      background-position: top 100px left 0, top 0 left 0;
      background-size: 140px 140px, cover;

      &::after {
        bottom: -4%;
        content: url('/assets/images/faq/Cloud-4.webp');
      }
    }

    &__summary {
      font-size: 10px;
      padding: 12px 15px;
    }
    &__detail-description .description { margin: 7px 14px 11px 15px;}
    &__table { z-index: 0;}
    &__gift { width: 150px; }
  }
}