.wp-block-details {
    --block-gap: 2rem;
    border-bottom-color: var(--stroke);
    border-bottom-width:  1px;
    border-bottom-style: solid;
    padding-bottom: 1.5rem;
    width: 100%;

    @media (min-width: 768px) {
        /* padding: 2rem 0; */
    }

    & summary {
        position: relative;
        font-family: var(--title-2-primary-small-bold-family);
        font-size: var(--title-2-primary-small-bold-size-rem);
        line-height: var(--title-2-primary-small-bold-line-height-rem);
        font-weight: var(--title-2-primary-small-bold-weight);
    
        @media (min-width: 768px) {
            font-family: var(--title-2-primary-large-bold-family);
            font-size: var(--title-2-primary-large-bold-size-rem);
            line-height: var(--title-2-primary-large-bold-line-height-rem);
            font-weight: var(--title-2-primary-large-bold-weight);
        }
     }
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)).wp-block-details {
    margin-right: 1rem !important;
    margin-left: 1rem !important;

    @media (min-width: 1024px) {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    @media (min-width: 768px) {
        margin-right: 2.5rem !important;
        margin-left: 2.5rem !important;

    }
}

:root :where(.is-layout-constrained) > .wp-block-details:last-child {
    margin-block-end: 3rem;

    @media (min-width: 768px) {
        margin-block-end: 6.5rem;
    }
}

/* Remove the default marker */
.wp-block-details summary::marker {
    content: ""; /* Hides the default marker */
}

/* Add a custom marker at the end */
.wp-block-details summary::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content:"";
    width: 1rem;
    height: 1rem;
    background-image: linear-gradient(to bottom, transparent 45%, var(--on-background) 45%, var(--on-background) 55%, transparent 55%), linear-gradient(to right, transparent 45%, var(--on-background) 45%, var(--on-background) 55%, transparent 55%);
}
/* Change marker when the details are open */
details.wp-block-details[open] summary::after {
    content: "";
    background-image: linear-gradient(to bottom, transparent 45%, var(--on-background) 45%, var(--on-background) 55%, transparent 55%);
}