.accordion {
    --bs-accordion-active-color: unset;
    --bs-accordion-active-bg: unset;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 1.6rem;
    --bs-accordion-btn-padding-y: 1.6rem;
    --bs-accordion-btn-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4yIDExLjgwMjZWNC40MDI1OUgxMi44VjExLjgwMjZIMjBWMTMuNDAyNkgxMi44TDEyLjggMjAuNDAyNkgxMS4yTDExLjIgMTMuNDAyNkg0VjExLjgwMjZIMTEuMloiIGZpbGw9IiMwMjAyMDMiLz4KPC9zdmc+Cg==');
    --bs-accordion-btn-active-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDExLjgwMjZWMTMuNDAyNkg0VjExLjgwMjZIMjBaIiBmaWxsPSIjMDIwMjAzIi8+Cjwvc3ZnPgo=');
    --bs-accordion-border-radius: 0;
    --bs-accordion-bg: unset;
}

/* If the accordion has no header, move the frame anchor up so it does not overlap with the first accordion item */
.frame > .share-anchor:not(:has(~ * header)) {
    .share-anchor__icon {
        transform: translateY(calc(-100% - 10px));
    }
}

.accordion-item {
    --bs-accordion-border-width: 1;
    border-bottom: 1px solid var(--light-gray);
}

.accordion-button {
    font-weight: 700;
    font-size: var(--font-size-base);

    &:hover {
        .share-anchor__icon {
            opacity: 1;
        }
    }

    .share-anchor {
        margin-left: auto;
    }

    .share-anchor__icon {
        top: 0;
        transform: translateY(-50%);
    }

    &:after {
        margin-left: 10px;
    }

    .accordion-button-title {
        padding-right: 2rem;
    }
}

.accordion-body {
    padding: 0 var(--bs-accordion-body-padding-x) var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);

    p {
        font-size: var(--font-size-base);
    }

    a:not(.btn) {
        color: var(--darker-gray);
        text-decoration: underline;
        text-underline-offset: 4px;

        &:hover {
            color: var(--dark-gray);
        }
    }
}

.accordion__images {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;

    img {
        max-width: 100%;
        height: auto;
        margin: auto 0;
    }
}

.accordion__image-background {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    .glightbox {
        display: flex;
    }

    h3 {
        margin-bottom: 10px;
        font-size: var(--font-size-base);
    }
}