.accordions {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.accordion:first-child {
    margin-top: 0;
}

.accordion__head {
    cursor: pointer;
    position: relative;
    margin: 0;
}

button.accordion__head, .accordion__head > button {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    background: none;
    border: 0;
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: var(--font-size-h4);
    color: var(--secondary-color);
    line-height: 1
;
}

button.accordion__head img,
.accordion__head > button img {
    width: 55px;
    height: auto;
}

button.accordion__head[aria-disabled], .accordion__head > button[aria-disabled] {
    cursor: default;
    outline: 0;
}

.accordion__head > button {
    position: relative;
    z-index: 1;
    background: inherit;
    border: inherit;
    display: flex;
    align-items: center;
    text-align: left;
    padding-right: 36px;
}

.accordion__head button:before {
    content: "";
    width: 56px;
    height: 56px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'><path d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z' fill='%23FF772C'/></svg>") no-repeat center center / contain;
    display: block;
}

.primary .accordion__head span.primary {
    color: var(--primary-color);
}

.primary .accordion__head span.secy {
    color: var(--secondary-color);
}

.accordion__body {
    padding-top: 16px;
    padding-left: 48px;
}

.accordion__body a {
    color: var(--white);
    font-weight: 700;
}

.accordion.is-open > .accordion__head button:before {
    transform: translate(0, 5%) rotate(90deg);
}