#accordion {
    margin-top: 3rem;
    max-width: 40em;
}
#accordion .column {
    margin:1em 0;
}
#accordion .tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

#accordion .tab h3 {
    font-family: var(--font-header);
    color:var(--brown-color);
    font-size: calc(1.325rem + .125vw);
    font-weight: 500;
    margin: 0;
}

#accordion .tab i {
    font-size: .875em;
    color:var(--gold-color);
    transition:transform .25s cubic-bezier(0,0,0.3,1);
}

#accordion p {
    font-size: .925rem;
    margin-bottom: 0;
}

#accordion .column.active > .tab i {
    transform: rotate(180deg);
}

#accordion .column p {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
}

#accordion .column.active > p {
    opacity: 1;
    visibility: visible;
    max-height: 20em;
    padding-bottom: 2em
}

#accordion.animate p {transition: opacity .25s, visibility .25s, max-height .5s, padding-bottom .5s;}
#accordion.animate .active p {transition: opacity .5s .25s, visibility .5s .25s, max-height .5s, padding-bottom .5s;}