/**
 * colors
 */
.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s;
  cursor: pointer;
}
.accordion__header:hover {
  color: #4c9b35;
}
.accordion__header--purple:hover {
  color: #4B1743FF;
}
.accordion__header--brown:hover {
  color: #6e3e1d;
}
.accordion__header--blue:hover {
  color: #004f80;
}
.accordion__header--orange:hover {
  color: #ad6700;
}
.accordion__header > h3, .accordion__header h2 {
  font-weight: normal;
  font-size: 1.17em;
  margin-block-start: 0.7em;
  margin-block-end: 0.7em;
}
.accordion__header > h3 sup, .accordion__header h2 sup {
  font-weight: bold;
  top: -0.1em;
}
.accordion__header > .material-icons {
  transform: rotateZ(0);
  transition: transform 0.3s;
}
.accordion__content {
  height: 100%;
  max-height: 2px;
  transition: all 0.6s;
  overflow: hidden;
  background-color: #cdcdcd;
}
@media (min-width: 800px) {
  .accordion__content {
    max-height: none;
    height: 2px;
  }
}
.accordion__content > div {
  padding: 2rem;
}
.accordion--expanded .accordion__header > .material-icons {
  transform: rotateZ(-180deg);
}
.accordion--expanded .accordion__content {
  max-height: 450px;
}
@media (min-width: 800px) {
  .accordion--expanded .accordion__content {
    height: 350px;
  }
}