.paragraph-accordion-item {
  background-color: white;
  border-radius: 10px;
  border: solid 1px #eee;
  margin-bottom: 20px;

  -webkit-box-shadow: 1px 4px 8px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 1px 4px 8px 0px rgba(34, 60, 80, 0.2);
  box-shadow: 1px 4px 8px 0px rgba(34, 60, 80, 0.2);
}

.paragraph-accordion-item__input {
  width: 0;
  height: 0;

  -webkit-appearance: none;
  appearance: none;

  position: absolute;
}

.paragraph-accordion-item__title {
  display: block;
  position: relative;
  padding: 10px 20px;
  color: #fff;
  background-color: #f8f8f8;
  border-radius: 10px;

  cursor: pointer;
  transition: 0.5s ease-out;
}

.paragraph-accordion-item__title:hover {
  background-color: #f0f0f0;
}

.paragraph-accordion-item__title:after {
  content: '';
  position: absolute;
  top: calc(50% - 10px);
  right: 16px;

  transition: 0.25s ease-in-out;

  border-style: solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #555555;
  border-right: 0;
}

.paragraph-accordion-item__input:checked ~ .paragraph-accordion-item__title:after {
  transform: rotate(90deg);
}

.paragraph-accordion-item__input:checked ~ .paragraph-accordion-item__title {
  background-color: #f0f0f0;

  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.paragraph-accordion-item__content {
  padding: 0px 20px;

  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;

  transition: max-height 0.25s linear, height 0.25s linear, margin-top 0.25s linear, visibility 0.25s linear, opacity 0.25s linear;
}

.paragraph-accordion-item__input:checked ~ .paragraph-accordion-item__content {
  margin-top: 16px;

  visibility: visible;
  opacity: 1;
  max-height: max-content;
}