.accordion {
  min-width: 400px;
  max-width: 85%;
  margin: 0 auto;
}

.accordion .accordion-item {
  position: relative;
  margin-bottom: 20px;
  padding: 0px min(80px, max(20px, calc(100vw - 400px)* 0.15)) 30px min(80px, max(20px, calc(100vw - 400px)* 0.15));
  color: #333;
  overflow: hidden;
  border-bottom: 1px solid #222;
}


.accordion .accordion-item p {
  text-align: left;
}

.accordion .short-answer {
  /* font-weight: 500; */
  font-style: italic;
}


.accordion button {
  all: unset;

  display: grid;
  grid-template-columns: 1fr 60px;
  /* position: relative;
  display: block; */
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;

  width: 100%;
  padding: 10px 0px;
  cursor: pointer;
}

.accordion .accordion-title {
  /* all: unset; */
  grid-column: 1;
  /* font-size: calc(max(32px, .015 * 100vw)); */
  font-size: calc(max(28px, 20px + .008 * 100vw));

}
.accordion .icon {

  grid-column: 2;
  justify-self: center;
  /* display: inline-block;
  position: absolute; */
  top: 20px;
  right: 0;
  width: 50px;
  height: 50px;
  /* v */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M0 0 v5 l40 35 l40 -35 v-5 l-40 35 l-40 -35' fill='%2333C481'/></svg>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s linear;
}

/* x */
.accordion-item.expanded .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M0 0 v5 l37 33 l-37 33 v5 l40 -35 l40 35 v-5 l-37 -33 l37 -33 v-5 l-40 35 l-40 -35' fill='%2333C481'/></svg>");
}

.accordion-content {
  margin: 0px min(100px, max(40px, calc(100vw - 400px)* 0.2));
  display: none;
  height: 0;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.accordion-item.expanded .accordion-content {
  display: block;
  height: auto;
  opacity: 1;
}