.accord {
    width: 100%;
    background-color: var(--color-sage);
    border-radius: border-radius: var(--acc-r, 8px);
}
/* Add a gap between accordion elements*/
.accord + .accord {
    margin-top: .25rem;
}
.accord-intro {
    padding: 1rem;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    background-color: var(--color-transparent-dark-sage);
    transition: background-color 0.25s;
    font-size: 1.25rem;
}
.accord-intro:hover {
    background-color: var(--color-dark-sage);
}
.accord-intro:focus {
    
}
.accord-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.accord-content p {
    padding: 0 .1rem .1rem;
}
.accord-active .accord-content {
    max-height: 31rem;
}
.accord-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--acc-fg);
    margin: 0 0 0.5em 0;
    padding: 1rem 1rem 0 1rem;
    line-height: 1;
}

.accord-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    float: right;
}