@layer components {
  .qa {
    margin-block-start: -0.5cqi;
    background-color: oklch(24.039% 0.0015 17.26 / 0.8);
    color: oklch(100% 0 0);
    font-family: var(--font-hero);
  }

  .qa__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6cqi;
    padding-block: 14cqi;
    inline-size: 100%;
  }

  .qa__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    inline-size: 77cqi;
  }

  .qa__title-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 7cqi;
    min-inline-size: max-content;
    border-radius: var(--radius-full);
    padding-inline: 3cqi;
    background-color: oklch(95.066% 0.1212 101.83);
    color: oklch(66.503% 0.1804 8.68);
    font-size: 3.75cqi;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
  }

  .qa__title-main {
    color: oklch(100% 0 0);
    font-size: 8cqi;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }

  .qa__list {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    align-items: center;
    inline-size: 100%;
    padding-inline: 6cqi;
  }

  .qa__item {
    inline-size: 88cqi;
    border-radius: 2.5cqi;
    padding-block: 4cqi;
    padding-inline: 3cqi;
    background-color: oklch(100% 0 0);
  }

  .qa__question {
    display: grid;
    grid-template-columns: 6cqi 67cqi 4cqi;
    gap: 2cqi;
    align-items: center;
    inline-size: 81cqi;
    min-block-size: 6cqi;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .qa__q-icon,
  .qa__a-icon {
    display: grid;
    place-items: center;
    inline-size: 6cqi;
    block-size: 6cqi;
    border-radius: 50%;
    font-size: 3.5cqi;
    font-weight: 900;
    line-height: 1.43;
    text-align: center;
    white-space: nowrap;
  }

  .qa__q-icon {
    align-self: center;
    background-color: oklch(58.909% 0.1984 12.36);
    color: oklch(100% 0 0);
  }

  .qa__q-text {
    inline-size: 67cqi;
    color: oklch(58.909% 0.1984 12.36);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.5;
  }

  .qa__toggle {
    position: relative;
    inline-size: 4cqi;
    block-size: 4cqi;
  }

  .qa__toggle::before,
  .qa__toggle::after {
    content: "";
    position: absolute;
    background-color: oklch(58.909% 0.1984 12.36);
  }

  .qa__toggle::before {
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 4cqi;
    block-size: 0.5cqi;
    translate: 0 -50%;
  }

  .qa__toggle::after {
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 0.5cqi;
    block-size: 4cqi;
    translate: -50% 0;
    transition: rotate 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .qa__item--open .qa__toggle::after {
    rotate: 90deg;
  }

  .qa__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .qa__item--open .qa__answer {
    grid-template-rows: 1fr;
  }

  .qa__answer-inner {
    overflow: hidden;
  }

  .qa__answer-content {
    display: flex;
    gap: 2cqi;
    align-items: flex-start;
    inline-size: 81cqi;
    padding-block-start: 3cqi;
  }

  .qa__a-icon {
    flex: 0 0 6cqi;
    background-color: oklch(66.503% 0.1804 8.68);
    color: oklch(95.066% 0.1212 101.83);
  }

  .qa__a-texts {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    inline-size: 73cqi;
  }

  .qa__a-main,
  .qa__a-sub {
    inline-size: 73cqi;
    font-size: 4cqi;
    line-height: 1.5;
  }

  .qa__a-main {
    color: oklch(66.503% 0.1804 8.68);
    font-weight: 700;
  }

  .qa__a-sub {
    color: oklch(24.776% 0 0);
    font-weight: 400;
  }
}