.accordion-item {
    margin-bottom: .25em;
}
.accordion-item:last-child {
    margin-bottom: 0;
}
#accordion_projects button {
    display: flex;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border:1px solid #D9D9D9;
    width: 100%;
    padding:.75em 4.25em;
    padding-right: 2.75em;
    align-items: center;
    transition: color .35s ease;
}
#accordion_projects button .ico-document {
    display: flex;
    align-items: center;
    background-color: var(--earth-color);
    color:white;
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    padding: 0 .85em;
    font-size: 1.125rem;
}
#accordion_projects button[aria-expanded="true"] {
    color:var(--earth-color)
}
#accordion_projects button[aria-expanded="true"] + article {
    opacity: 1;
    max-height: 10em;
}
#accordion_projects article {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}
#accordion_projects.animate article {
    transition: opacity .5s ease, max-height .5s ease;
}
.accordion-body {
    padding:1em .75em
}
#accordion_projects article p {
    margin:0;
    margin-bottom: .25em;
    font-size: clamp(.9375rem, .5rem + .5vw, 1rem);
}
#accordion_projects article p:last-child {
    margin-bottom: 0;
}
#accordion_projects strong {
    font-weight: 600;
}
.description {margin-top: 1em;}
.description strong {
    display: block;
    margin-bottom: .25em;
}


.project_name {
    font-weight: 550;
    font-size: clamp(1rem, .75rem + .5vw, 1.125rem);
    text-align: left;
    line-height: 1.4;
}


.plus-minus {
    display: inline-block;
    height: 12px;
    position: absolute;
    right: 1em;
    width: 12px;
    min-width: 12px;
    margin-right: 0;
    margin-left: 1em;
  }
  .plus-minus::before, .plus-minus::after {
    background:var(--earth-color);
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate3d(0,-50%,0) rotate(180deg);
}
#accordion_projects.animate .plus-minus::before, #accordion_projects.animate .plus-minus::after {
    transition:transform 500ms ease, background-color .5s ease;
}
.plus-minus::after {
    transform-origin: center;
    transform: translate3d(0,-50%,0) rotate(90deg);
}

button[aria-expanded="true"] .plus-minus::before, button[aria-expanded="true"] .plus-minus::after {
    transform: none;
    background:var(--mustard-color)
}