.mask-accordion-header {
    cursor: pointer;
    background-color: #eee;
}
.mask-accordion-header:focus {
    outline: 2px dotted currentColor;
}
.mask-accordion-header h4 {
    position: relative; 
    font-weight: bold; 
    padding: .5em .5em .5em 1.5em;
}
.mask-accordion-header h4::before {
    content: ""; 
    position: absolute; 
    left: 10px; 
    margin-top: 7px; 
    border-style: solid; 
    border-width: 4px 0 4px 6px; 
    border-color: transparent transparent transparent #aaa; 
    transition: all .35s;
}
.mask-accordion-header:hover h4::before {
    border-color: transparent transparent transparent #212121;
}

.mask-accordion-body {
    max-height: 0; 
    transition: max-height 0.4s; 
    overflow: hidden;
}
            
.mask-accordion-active .mask-accordion-header h4 {
    color: #d03939;
}
.mask-accordion-active .mask-accordion-header h4::before {
    transform: rotate(90deg);
    transition: all .35s;
}
.mask-accordion-active .mask-accordion-body {
    max-height: 6000px;
    transition: max-height 0.4s;
}