.faq-item p:empty {
    display: none;
}


.faq-list {
    display: grid;
    grid-row-gap: 20px;
}
.faq-item {
    background: rgb(var(--color-background-lighter));
    border-radius: 13px;
    --padding-vertical: 24px;
    --padding-horizontal: 32px;
}
.faq-item .headline.--small {
    margin-top: 0;
    text-transform: none;
    font: inherit;
}
.faq-item hgroup {
    padding: var(--padding-vertical) var(--padding-horizontal);
    padding-bottom: calc(var(--padding-vertical) - 6px);
    position: relative;
}
.faq-item .__answer {
    padding: var(--padding-vertical) var(--padding-horizontal);
    padding-top: 0;
}


.faq-item.toggleable {
    & hgroup {
        cursor: pointer;
        padding-right: calc(2 * var(--padding-horizontal));

        &::after {
            content: "";
            position: absolute;
            display: block;
            width: 12px;
            height: 12px;
            background: url('/images/icons/faq-plus.svg') no-repeat 50% 50%;
            right: var(--padding-horizontal);
            top: 50%;
            translate: 0 -50%;
            transition: transform .4s;
        }
    }
    & .__answer {
        display: none;
    }
    &.is-active {
        .__answer {
            display: block;
        }

        hgroup::after {
            transform: rotate(45deg);
        }
    }
}