.faq {
  background-color: var(--yellow-100);
  border-radius: 10px;
}
@media (min-width: 740px) {
  .faq {
    padding: 36px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .faq {
    padding: 20px;
  }
}
@media (max-width: 739.98px) {
  .faq {
    padding: 14px;
  }
}
.faq_list {
  display: grid;
  counter-reset: faq;
}
@media (min-width: 740px) {
  .faq_list {
    row-gap: 10px;
  }
}
@media (max-width: 739.98px) {
  .faq_list {
    row-gap: 6px;
  }
}
.faq_item {
  counter-increment: faq;
}
.faq_title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: start;
  border-bottom: solid 1px var(--yellow-400);
  transition: all 250ms ease-in-out;
}
@media (min-width: 740px) {
  .faq_title {
    padding: 16px;
  }
}
@media (max-width: 739.98px) {
  .faq_title {
    padding: 10px;
  }
}
.faq_title:hover, .faq_title:focus-visible {
  color: var(--slate-700);
}
.faq_title::before {
  content: counter(faq) ".";
}
.faq_title::after {
  width: var(--size);
  height: var(--size);
  content: "";
  background-color: var(--yellow-400);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23CE1126' d='M5 11h6V5h2v6h6v2h-6v6h-2v-6H5v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 250ms ease-in-out;
}
@media (min-width: 740px) {
  .faq_title::after {
    --size: 24px;
  }
}
@media (max-width: 739.98px) {
  .faq_title::after {
    --size: 20px;
  }
}
.faq_title.active::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23CE1126' d='M19 13H5v-2h14v2Z'/%3E%3C/svg%3E");
}
.faq_text {
  padding-inline: var(--margin-block);
}
@media (min-width: 740px) {
  .faq_text {
    padding-top: 10px;
  }
}
@media (max-width: 739.98px) {
  .faq_text {
    padding-top: 6px;
  }
}