/*** ---------- Blog > Index (table of contents) ---------- ***/
.wpb-index { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--clr-border);
    .wpb-index__button { display: flex; align-items: center; gap: 1.6rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
        .wpb-index__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
        i { font-size: 2rem; transition: transform var(--ts-duration) ease; }
    }

    .wpb-index__collapse { transition: height var(--ts-duration) var(--ts-function);
        &:not(.show):not(.collapsing) { display: none; }
        &.collapsing { height: 0; overflow: hidden; }
    }
    .wpb-index__body { padding-top: 1rem; display: flex; flex-direction: column; gap: .6rem;
        .wpb-index__item {
            &:hover .wpb-icon-wrapper { --icon-clr: var(--clr-heading-primary); background-color: var(--clr-primary); }
            .wpb-index__link { display: flex; gap: .8rem; transition: color var(--ts-duration) ease; text-decoration: none!important;
                &:hover { color: var(--clr-primary); }
            }
        }
        .wpb-icon-wrapper { --icon-clr: var(--clr-text); --size: 2rem; background-color: var(--clr-light); margin-top: .3rem; transition: background-color var(--ts-duration) ease, color var(--ts-duration) ease;
            i { font-size: 1.2rem; transition: background-color var(--ts-duration) ease;
                &::before { font-size: 1rem; color: var(--icon-clr)!important; }
            }
        }
    }

    &.is-active .wpb-index__button i { transform: rotate(180deg); }
}

/*** ---------- Blog > Content ---------- ***/
.wp-block-image img { border-radius: var(--radius); }