.accordion-wrapper .accordion-element {  
    border-bottom: 1px solid var(--cd-font-main-color);
    transition: opacity var(--cd-transition-duration) var(--cd-transition-timing-function);
}

.accordion-wrapper .accordion-element h1,
.accordion-wrapper .accordion-element h2,
.accordion-wrapper .accordion-element h3,
.accordion-wrapper .accordion-element h4,
.accordion-wrapper .accordion-element h5,
.accordion-wrapper .accordion-element h6 {
    margin: 0;
    padding: 0;
    text-wrap: balance;
}
  
.accordion-wrapper .accordion-element .accordion-element-trigger {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1rem 0;
    line-height: 1.3;
}

.accordion-wrapper .accordion-element .accordion-element-trigger:focus {
    outline: 0;
}

.accordion-wrapper .accordion-element:first-child .accordion-element-trigger {
    padding-top: 0;
}
  
.accordion-wrapper .accordion-element .accordion-element-trigger::after {
    content: "";
    flex-shrink: 0;
    position: relative;
    top: 4px;
    /* Use a mask SVG so the icon color can be controlled by 'color' */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'><path fill='currentColor' d='M16.32 9.408H9.504v6.912h-2.72V9.408H0V6.944h6.784V0h2.72v6.944h6.816v2.464Z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'><path fill='currentColor' d='M16.32 9.408H9.504v6.912h-2.72V9.408H0V6.944h6.784V0h2.72v6.944h6.816v2.464Z'/></svg>") no-repeat center / contain;
    background-color: currentColor;
    height: 1rem;
    width: 1rem;
}
  
.accordion-wrapper .accordion-element .accordion-element-content {
    overflow: hidden;
    transition-property: height, visibility;
    transition-timing-function: ease;
}

.accordion-wrapper .accordion-element .accordion-element-content .accordion-element-content-inner {
    padding-bottom: 1em;
}
  
.accordion-wrapper .accordion-element.js-enabled .accordion-element-content {
    visibility: hidden;
}
  
.accordion-wrapper .accordion-element.is-active .accordion-element-content {
    visibility: visible;
}
  
.accordion-wrapper .accordion-element.is-active > .accordion-element-header .accordion-element-trigger::after {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='3' fill='none'><path fill='currentColor' d='M12.768 0v2.464H0V0h12.768Z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='3' fill='none'><path fill='currentColor' d='M12.768 0v2.464H0V0h12.768Z'/></svg>") no-repeat center / contain;
}

/* Hover Effect */
.accordion-container:hover .accordion-element {
    opacity: 0.5;
}

.accordion-container .accordion-element:hover {
    opacity: 1;
}