.accordion-wrapper {
    margin: 64px auto 0;
    max-width: 900px;
    width: 100%;
}

.accordion {
    display: flex;
    flex-direction: column;
    --accordion-transition-duration: .2s;
}

.accordion:not(:last-child) {
    border-bottom: 1px solid var(--color-black);
}

.accordion__header {
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    padding: 24px 32px;
    transition: all var(--accordion-transition-duration) ease-out;
    align-items: center;
    justify-content: space-between;
}

.accordion__header:hover {
    background: rgba(0, 0, 0, .05);
}

.accordion--expand .accordion__header {
    background: rgba(0, 0, 0, .05);
    border-bottom: 2px solid var(--color-brand-primary);
}

.accordion__header h3 {
    font-size: var(--font-size-m);
    font-weight: 400;
    padding-right: 32px;
}

.accordion__header__icon {
    cursor: pointer;
    display: flex;
    height: 32px;
    transition: transform var(--accordion-transition-duration) ease-in-out;
    width: 32px;
    align-items: center;
    justify-content: center;
}

.accordion__header__icon .icon-svg {
    height: 32px;
    width: 32px;
}

.accordion__header__icon .line-vertical {
    transform-origin: center;
    transition: transform var(--accordion-transition-duration) ease-in-out, opacity var(--accordion-transition-duration) ease-in-out;
}

.accordion--expand .accordion__header__icon .icon-svg {
    color: var(--color-brand-primary);
}

.accordion--expand .accordion__header__icon .line-vertical {
    opacity: 0;
    transform: scaleY(0) rotate(90deg);
}

.accordion__body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 32px;
    transition: max-height var(--accordion-transition-duration) ease-out, opacity var(--accordion-transition-duration) ease-in-out, padding var(--accordion-transition-duration) ease-out;
}

.accordion--expand .accordion__body {
    max-height: 500px;
    opacity: 1;
    padding: 16px 32px;
}