[data-accordion-element-content] {

  height: auto;

  overflow: hidden;

  transition: height 0.5s;

}



section.card {

  margin: 50px auto;

  border-radius: 3px;

  background: #fff;

  border: 0;

}



section.card article {

  position: relative;

  transition: all 0.3s;



  /* &.selected {

    transform: scale(1.1);

    box-shadow: 0 0 5px rgba(2, 2, 2, 0.4);

    z-index: 2;

    border-radius: 3px;

    background-color: var(--kivi-primary-first);

  }



  &.selected-package {

    border: 4px solid var(--kivi-primary-zeroth);

  } */

}



section.card h1 {

  position: relative;

  background: var(--kivi-secondary-zeroth);

  padding: 20px 75px 20px 30px;

  font-size: 20px;

  line-height: 30px;

  color: var(--kivi-secondary-second);

  overflow: hidden;

  transition: background 0.3s;

  border: 2px solid var(--kivi-secondary-third);

  border-radius: 5px;

  margin-bottom: 4px;

  text-wrap: nowrap;



  &:hover,

  .selected & {

    cursor: pointer;

    background: var(--kivi-secondary-second);

    color: var(--kivi-secondary-zeroth)

  }



  &:before,

  &:after {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    margin-top: -1px;

    margin-right: 30px;

    width: 20px;

    height: 2px;

    background: #000;

    transition: transform 0.3s;

  }

}



section.card h1:before {

  transform: rotate(0deg);

  animation: close-line-one-in 0.8s forwards;

}



section.card .selected h1:before {

  animation: close-line-one-out 0.8s forwards;

}



section.card h1:after {

  transform: rotate(90deg);

  animation: close-line-two-in 0.8s forwards;

}



section.card .selected h1:after {

  animation: close-line-two-out 0.8s forwards;

}



section.card .content {

  opacity: 0;

  transform: translateY(20px);

  transition: all ease-out 0.4s 0.1s;

  padding: 0;



  .selected & {

    transform: translateY(0);

    opacity: 1;

  }



  .collapsed & {

    display: none;

  }

}



section.card p {

  padding: 25px 30px 40px;

  background: #e8eaf6;

  font-size: 16px;

  line-height: 24px;

  color: #000;

}



@keyframes close-line-one-out {

  0%,

  50% {

    transform: translateX(0);

  }

  75% {

    transform: translateX(50px);

  }

  76% {

    transform: translateX(50px) translateY(50px);

  }

  100% {

    transform: rotate(45deg);

  }

}



@keyframes close-line-one-in {

  0%,

  20% {

    transform: rotate(45deg);

  }

  60% {

    transform: translateX(50px) translateY(50px) rotate(45deg);

  }

  61% {

    transform: translateX(50px);

  }

  100% {

    transform: rotate(0deg);

  }

}



@keyframes close-line-two-out {

  0%,

  50% {

    transform: rotate(90deg);

  }

  75% {

    transform: translateY(-50px) rotate(90deg);

  }

  76% {

    transform: translateY(-50px) translateX(50px) rotate(90deg);

  }

  100% {

    transform: rotate(135deg);

  }

}



@keyframes close-line-two-in {

  0% {

    transform: rotate(135deg);

  }

  50% {

    transform: translateY(-50px) translateX(50px) rotate(135deg);

  }

  51% {

    transform: translateY(-50px) rotate(90deg);

  }

  100% {

    transform: rotate(90deg);

  }

}