@layer components {
  .qa {
    background-color: oklch(0.5 0.2 265);
    padding-block: 14cqi;
    padding-inline: 6cqi;
  }

  .qa__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 6cqi;
  }

  .qa__title-sub {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: oklch(1 0 0);
    border-radius: var(--radius-full);
    padding-block: 1.25cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(0.5 0.2 265);
  }

  .qa__title-main {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
    text-align: center;
  }

  .qa__list {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .qa__item {
    background-color: oklch(0.97 0.005 270);
    border-radius: 2.5cqi;
    padding: 4cqi 3cqi;
  }

  .qa__question {
    display: flex;
    align-items: center;
    gap: 2cqi;
    cursor: pointer;
  }

  .qa__q-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 6cqi;
    block-size: 6cqi;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 800;
    color: oklch(1 0 0);
  }

  .qa__q-text {
    flex: 1;
    min-width: 0;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-accent);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .qa__toggle {
    flex-shrink: 0;
    position: relative;
    inline-size: 4cqi;
    block-size: 4cqi;
    cursor: pointer;
  }

  .qa__toggle::before,
  .qa__toggle::after {
    content: "";
    position: absolute;
    background-color: var(--color-accent);
  }

  .qa__toggle::before {
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2.5px;
    translate: 0 -50%;
  }

  .qa__toggle::after {
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 2.5px;
    block-size: 100%;
    translate: -50% 0;
    transition: rotate var(--duration-normal) var(--ease-out);
  }

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

  .qa__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-out);
  }

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

  .qa__answer-inner {
    overflow: hidden;
  }

  .qa__answer-content {
    display: flex;
    gap: 2cqi;
    padding-block-start: 3cqi;
  }

  .qa__a-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 6cqi;
    block-size: 6cqi;
    border-radius: var(--radius-full);
    background-color: oklch(0.5 0.2 265);
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 800;
    color: var(--color-accent-light);
  }

  .qa__a-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .qa__a-main {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.5;
    color: oklch(0.5 0.2 265);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .qa__a-sub {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }
}