:root {
  --color-White: hsl(0, 100%, 100%);
  --color-Purple-100: hsl(275, 100%, 97%);
  --color-Purple-600: hsl(292, 16%, 49%);
  --color-Purple-950: hsl(292, 42%, 14%);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}
body {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-family: "Work Sans", sans-serif;
  background: var(--color-Purple-100)
    url("./assets/images/background-pattern-desktop.svg") top center no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-Purple-950);
}
.container {
  width: min(66rem, 90%);
  background-color: var(--color-White);
  padding: 3rem;
  padding-bottom: 0;
  border-radius: 1rem;
}
.header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 3rem;
}
.header__icon {
  height: 4rem;
}
.primary-heading {
  font-size: clamp(2.5rem, 4vw, 4.8rem);
}
.faq-card:not(:last-child) {
  border-bottom: 1px solid var(--color-Purple-100);
  margin-bottom: 2.4rem;
}
.question-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  border: none;
  background: none;
}
.question-container:hover,
.question-container:focus {
  color: var(--color-Purple-600);
  outline: none;
}

.faq-question {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 600;
  transition: color 0.2s;
  text-align: start;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--color-Purple-600);
  margin-bottom: 2rem;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}
.faq-card.active .faq-answer {
  max-height: 12rem;
}
.icon--minus {
  display: none;
}

.faq-card.active .icon--minus {
  display: block;
}
.faq-card.active .icon--plus {
  display: none;
}
/* @media (max-width: 600px) {
  html {
    font-size: 50%;
  }
  body {
    background: var(--color-Purple-100)
      url("./assets/images/background-pattern-mobile.svg") top center no-repeat;
} }*/