.accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;

  .item {
    background: transparent;
    width: 100%;
    overflow: hidden;
  }

  .item:not(:first-child) {
    border-top: 1px solid var(--dark);
  }

  .item:last-child {
    border-bottom: 1px solid var(--dark);
  }

  .title {
    position: relative;
    width: 100%;
    padding: 1rem 2.5rem 1rem 1.5rem;
    border: none;
    font-size: 1.1rem;
    text-align: left;
    transition-duration: 0.3s;
    cursor: pointer;
    font-weight: var(--font-weight-bold);

    .icon {
      position: absolute;
      top: 50%;
      right: 1.25rem;
      transform: translateY(-50%);
      transform-origin: center;
      width: 0.8rem;
      height: 0.8rem;
      transition-duration: var(--transition-duration);

      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        background: var(--dark);
      }
    }
  }

  .title:hover {
    .icon:before,
    .icon:after {
      background: var(--black);
    }
  }

  .open > .title {
    color: var(--black);

    .icon:before,
    .icon:after {
      background: var(--black);
    }
  }

  .content {
    overflow: hidden;
    max-height: 0;
    transition-duration: 0.3s;
  }

  .inner-content {
    padding: 1rem 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition-duration: 0.3s;
  }
}

.accordion > .item.open .inner-content {
  opacity: 1;
  visibility: visible;
}