.accordion-trigger {
  display: none;
}

  .accordion-trigger:checked ~ .accordion-content {
    max-height: 150em;
  }
  
  .accordion-trigger:checked ~ .accordion-content > .accordion-content-inner {
    opacity: 1;
    transform: translate(0, 0);
  }

.accordion-label {
  display: block;
  cursor: pointer;
  position: relative;
  transition: color .5s ease;
  width: 100%;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s linear;
}
  
  .accordion-content-inner {
    opacity: 0;
    -webkit-transform: translate(0, 50%);
        -ms-transform: translate(0, 50%);
            transform: translate(0, 50%);
    transition: transform 0.3s ease-in-out;
  }