.accordion {
  position: relative;
  display: flex;
  flex-direction: column;

  .innerWrapper {
    position: relative;

    .content {
      &.aboveAccordion,
      &.belowAccordion {
        width: 100%;
      }

      &.aboveAccordion {
        margin-bottom: 50px;
      }

      &.belowAccordion {
        margin-top: 50px;
      }
    }

    .accordion {
      width: 100%;

      .accordionItem {
        border: 2px solid var(--holtLightBlue);
        border-left-color: var(--grey);
        border-right-color: var(--grey);

        &:not(:first-child) {
          margin-top: -2px;
        }

        &:first-child {
          border-top-color: var(--grey);
        }

        &.active {
          position: relative;
          z-index: 1;
          border-color: var(--holtLightBlue);
        }

        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          padding: 25px;
          background-color: var(--grey);
          font-family: 'Montserrat', sans-serif;
          text-transform: uppercase;
          font-weight: 500;

          .titleArrow {
            display: inline-flex;
            transition: var(--transitionExpo);

            &.active {
              transform: rotate(180deg);
            }
          }
        }

        .contentWrapper {
          max-height: 0;
          overflow: hidden;
          transition: var(--transitionExpo);

          .content {
            padding: 25px;
          }
        }
      }
    }
  }
}