.accordion {
  padding-block: 10px;
}
.accordion .item {
  border-radius: 6px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
  transition: ease-in-out 0.3s;
}
.accordion .item.active {
  background: transparent linear-gradient(258deg, #E21944 0%, #8A258B 16%, #0080C3 38%, #12A571 60%, #E9E42D 80%, #F68920 100%) 0% 0% no-repeat padding-box;
}
.accordion .item-inner {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  padding: 4px 16px;
}
.accordion button {
  font-family: inherit !important;
  font-size: 24px;
  line-height: 1.2;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  width: 100%;
  border-top: 1px solid transparent;
  padding: .8rem 2.4rem .8rem 0;
}
@media screen and (min-width: 990px) {
  .accordion button {
    font-size: 24px;
  }
}

.accordion button.active {
  color: #1D63AF;
}

.accordion button:focus-visible {
  outline: 1px solid #000;
  outline-offset: 0.5rem;
}
@supports not selector(:focus-visible) {
  .accordion button:focus {
    outline: 3px solid #000;
    outline-offset: 0.5rem;
  }
}

.accordion button::after {
  color: black;
  border: none;
  position: absolute;
  top: 50%;
  right: 0;
  content: '';
  display: inline-block;
  mask-image: url(data:image/svg+xml,\ %3Csvg%20width%3D%2218%22%20height%3D%2210%22%20viewBox%3D%220%200%2018%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.78.443%208.991%206.336%203.205.443A1.485%201.485%200%200%200%202.154%200a1.464%201.464%200%200%200-1.052.443%201.516%201.516%200%200%200-.435%201.071%201.538%201.538%200%200%200%20.435%201.07l6.846%206.972a1.467%201.467%200%200%200%202.103%200l6.846-6.971a1.513%201.513%200%200%200%20.436-1.07%201.536%201.536%200%200%200-.436-1.072c-.581-.577-1.536-.592-2.118%200Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: #000;
  height: 22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0.25rem, -50%) rotateZ(-90deg);
  line-height: 1;
  z-index: 2;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.accordion button.active::after {
  transform: translate(0.25rem,-50%);
  background-color: #1D63AF;
}
.accordion .item-answer {
  margin: 0 auto 1rem;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}
.accordion .item-question:not(.active) + .item-answer {
  height: 0 !important;
  overflow: hidden;
  visibility: hidden;
  margin: 0 !important;
}