.accordion-section{
    margin: var(--block-margin) auto;
    width: 100%;
    max-width: var(--wide-width);
}

.accordion-section-heading{
    margin-bottom: var(--row-gap);
}

.accordion-section-heading.animate__animated{
    animation-name: fadeInUp;
}

.accordion-section-heading-content{
    max-width: 80rem;
}

.accordion-section-main.animate__animated{
    animation-name: fadeInUp;
}

.accordion-section details{
    border-top: 0.1rem solid var(--title-color);
    border-bottom: 0.1rem solid var(--title-color);
}

.accordion-section details:not(:last-child){
    margin-bottom: -0.1rem;
}

.accordion-section details > summary{
    padding: 0.84em 5rem 0.84em 0;
    font: var(--font-headline-4);
    letter-spacing: var(--secondary-letter-spacing);
    list-style: none;
    position: relative;
    color: var(--title-color);
    transition: color 0.3s ease;
}

.accordion-section details > summary:is(:hover, :focus){
    color: var(--link-color);
}

.accordion-section details > summary::-webkit-details-marker {
    display: none;
}

.accordion-section details > summary::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 1.2rem;
    border-right: 0.2rem solid;
    border-bottom: 0.2rem solid;
    width: 1em;
    height: 1em;
    transform: translateY(-75%) rotateZ(45deg);
    transition: all 0.3s ease;
}

.accordion-section details[open] > summary::before{
    transform: translateY(-25%) rotateZ(-135deg);
}

.accordion-section details > div{
    padding-bottom: 1em;
    max-width: 80rem;
}

.accordion-section details > div > *:last-child{
    margin-bottom: 0;
}