/* Block: accordion */
.accordion {
    /* Hairline read off the designs — darker than --tgc-line, which is tuned
       for cards rather than these full-width rules. */
    --accordion-rule: rgba(20, 22, 28, 0.7);
    --accordion-number: calc(44 * var(--tgc-u));

    max-width: var(--tgc-container);
    margin: 0 auto;
}

.accordion--soft {
    --accordion-rule: rgba(20, 22, 28, 0.28);

    padding: calc(30 * var(--tgc-u)) calc(34 * var(--tgc-u));
    border-radius: var(--tgc-radius);
    background-color: var(--tgc-violet-soft);
}

@media (max-width: 768px) {
    .accordion {
        --accordion-number: 36px;
    }

    .accordion--soft {
        padding: calc(22 * var(--tgc-u)) calc(20 * var(--tgc-u));
    }
}