.accordion__container {
    margin: var(--section-spacing) auto;
    max-width: 700px;
}

.accordion__nav-item {
    display: grid;
    grid-template-columns: 1fr auto;
    background: #fff;
    border: 1px solid var(--gray-300);
    padding: 1rem;
    border-radius: var(--border-radius);
    font-size: 1.125rem;
    color: var(--text-color-dark); /*var(--text-color-light);*/
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    max-height: 54px;
    overflow: hidden;
    transition: max-height 0.45s ease-out;
}

.content-wrapper .accordion__nav-item:hover,
.accordion__nav-item:hover {
    text-decoration: none;
}

.accordion__nav-item:not(.active):hover {
    background: var(--gray-100);
}

.accordion__nav-item span {
    font-size: 1rem;
    font-weight: bold;
}

.accordion__nav-item .accordion__heading {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0px;
    margin: 0px;
}

.accordion__nav-item a.accordion__nav-toggle {
    font-size: 1.125rem;
    color: var(--gray-900);
    font-weight: normal;
    text-decoration: none;
}

.accordion__nav-item a.accordion__nav-toggle:hover {
    text-decoration: none;
}

.accordion__nav-item svg {
    grid-column: 2;
    align-self: center;
}

.accordion__nav-item.active svg {
    transform: rotate(180deg);
}

.accordion__contents-item.active {
    max-height: 100%;
    /* transition: max-height 0.25s ease-out; */
}

.accordion__contents-item {
    font-size: var(--body-text);
    line-height: var(--line-height-body);
    color: var(--text-color-card);
    max-height: 0;
}

.accordion__contents-item a {
    color: inherit;
}

.accordion__contents-item h2,
.accordion__contents-item h3,
.accordion__contents-item p,
.accordion__contents-item strong {
    color: var(--text-color-card);
}

.accordion__nav-item.active {
    max-height: 100%;
    /* transition: max-height 0.45s ease-out; */
}