:root{
  --primary:#6C5CE7;
  --text:#171a27;
  --muted:#667085;
  --border:#e7e9f4;
  --shadow:0 20px 50px rgba(80,65,170,.12);
}

/* FAQ CONTAINER */
.faq-list{
  max-width:840px;
  margin:0 auto;
  margin-top: 25px;
}

/* ITEM */
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:18px;
  transition:all .25s ease;
}

/* QUESTION BUTTON */
.faq-question{
  width:100%;
  background:transparent;
  border:0;
  padding:24px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
}

/* ICON */
.faq-icon{
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--primary);
    background: #efeefe;
    padding-bottom: 3px;
    width: 26px;
    border-radius: 30px;
    transition: transform .25s ease;
}

/* ANSWER WRAPPER */
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}

/* INNER CONTENT */
.faq-answer__inner{
  overflow:hidden;
}

.faq-answer p{
  padding:0 24px 24px;
  color:var(--muted);
  margin:0;
}

/* OPEN STATE */
.faq-item.is-open .faq-answer{
  grid-template-rows:1fr;
}

.faq-item.is-open .faq-icon{
  transform:rotate(45deg);
}