/*ACCORDION */

.acc {
  width: 100%;
  margin: 0;
  padding: 0;
  margin: 2rem 0;
}

.acc__button {
  position: relative;
  border-bottom: 1px solid black;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

button {
  width: 100%;
  padding: 0;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  position: relative;
}

button:focus {
  outline: 0;
}

button:active {
  /*safari bug/hack*/
  color: black !important;
}

.arrow {
  position: absolute;
  width: 1.6rem;
  height: 0.8rem;
  left: 0;
  top: 1.9rem;
  transform: rotate(0deg);
  transition: transform;
  transition-duration: 0.3s;
  transform-origin: center center;
}

.arrow--open {
  transform: rotate(-180deg);
}

.arrow:before,
.arrow:after {
  content: "";
  position: absolute;
  top: 0.3rem;
  width: 0.8rem;
  height: 0.2rem;
  background-color: black;
}

.arrow:before {
  transform: skewY(35deg);
  left: 0rem;
}

.arrow:after {
  transform: skewY(-35deg);
  left: 0.8rem;
}

.acc__button__text {
  text-align: left;
  padding: 1rem 0.2rem 0.3rem 3rem;
}

.acc__button__text h2 {
  margin: 0;
}

.acc__content {
  margin: var(--base-margin) 0;
}

.acc__content--open {
  animation: acc 0.4s ease;
  animation-fill-mode: forwards;
  padding: var(--base-margin) 0;
  transform-origin: top;
  transform: scaleY(1);
}

@keyframes acc {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.acc__content__items {
  display: none;
  opacity: 0;
  width: 100%;
  max-width: 60rem;
}

.acc__content__items--active {
  display: block;
  margin-bottom: var(--big-margin);
  opacity: 0;
  animation: item-animation 0.3s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

@keyframes item-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}