*:not(.block-drawer) + .block-drawer {
    counter-set: block-drawer 0;
}
.block-drawer {
    padding-bottom: 15px;
}
.block-drawer::before {
    content: '';
    display: block;
    border-top: 1px dotted;
    opacity: 0.5;
    margin-bottom: 15px;
}
.block-drawer:not(:has(+.block-drawer))::after {
    content: '';
    display: block;
    border-top: 1px dotted;
    opacity: 0.5;
    margin-top: 15px;
}
.block-drawer__toggle-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    counter-increment: block-drawer 1;
    height: 63px;
}
.block-drawer__index {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
}
.block-drawer__index::before {
    content:  "0" counter(block-drawer);
}
.block-drawer__index::after {
    content: '';
    background-color: var(--wp--preset--color--red);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.block-drawer__push {
    text-align: left;
    margin: 0;
}
.block-drawer__inner {
    display: block;
    overflow: hidden;
    transition: 0.5s ease-in 0.1s;
    max-height: var(--custom-theme-drawer-height);
}
.block-drawer__inner[aria-hidden="true"] {
    max-height: 0!important;
}

.block-drawer__inner .is-style-3-5 .block-column__content {
    max-width: 486px;
}

.block-drawer__media {
    position: relative;
    height: 63px;
    border-radius: 10px;
    background-color: var(--wp--preset--color--dark-grey);

}
.block-drawer__media .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 6px;
    margin: -3px 0 0 -13px;
    transition: 0.3s ease-out 0.4s;
}
.block-drawer__media-element {
    width: 100%;
    height: calc(var(--custom-theme-drawer-height) + 63px);
    border-radius: 10px;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    transition: opacity 0.2s ease-out 0s;
}
.block-drawer__toggle-btn[aria-expanded="true"] .block-drawer__media-element {
    opacity: 1;
    transition-delay: 0.5s;
}

.block-drawer__toggle-btn[aria-expanded="true"] .block-drawer__media .icon {
    opacity: 0;
    transition-delay: 0s;
}

.block-drawer__content {
    padding-top: 20px;
}
.block-drawer__content > :first-child {
    margin-top: 0;
}
.block-drawer__content > :last-child {
    margin-bottom: 0;
}

.block-drawer__content .block-h3 {
    font-size: 0.9375rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.block-drawer__content .block-columns {
    margin-bottom: 32px;
    margin-top: 0;
}
.block-drawer__content > *:not(.block-columns) {
    max-width: 449px;
}

.block-drawer__index {
    --custom-theme-flex-span: 1;
}
.is-style-8-3 .block-drawer__push {
    --custom-theme-flex-span: 8;
}
.is-style-8-3 .block-drawer__media {
    --custom-theme-flex-span: 3;
}

.is-style-5-6 .block-drawer__push {
    --custom-theme-flex-span: 5;
}
.is-style-5-6 .block-drawer__media {
    --custom-theme-flex-span: 6;
    background: none;
}
.is-style-5-6 .block-drawer__media .icon {
    left: auto;
    right: 0;
}

.is-style-5-6 .block-drawer__content {
    padding-top: 42px;
    padding-bottom: 14px;
    max-width: 45%;
}


.block-drawer + .block-section-link {
    margin-top: 37px;
}

@media screen and (max-width: 1199px) {

    .is-style-8-3 .block-drawer__push {
        --custom-theme-flex-span: 7;
    }
    .is-style-8-3 .block-drawer__media {
        --custom-theme-flex-span: 4;
    }
    /* we have increase the image width, rework the columns to make some space */
    .block-drawer .is-style-3-5.block-columns .block-columns__columns {
        flex-wrap: wrap;
    }
    .block-drawer .is-style-3-5.block-columns .block-columns__columns::after {
        content: '';
        --custom-theme-flex-span: 1;
    }
    .block-drawer .is-style-3-5.block-columns .block-columns__columns >:first-child {
        --custom-theme-flex-span: 11;
    }
    .block-drawer .is-style-3-5.block-columns .block-columns__columns >:nth-child(2) {
        order: 100;
    }
}

@media screen and (max-width: 767px) {
    .block-drawer {
        margin-left: 35px;
        margin-right: 35px;
        padding-bottom: 17px;
    }
    *:not(.block-drawer) + .block-drawer {
        margin-top: 38px;
    }
    .block-drawer::before {
        margin-bottom: 17px;
    }
    .block-drawer::before,
    .block-drawer:not(:has(+ .block-drawer))::after {
        margin-left: calc(var(--wp--style--root--padding-left) * -1 - 35px);
        margin-right: calc(var(--wp--style--root--padding-right) * -1 - 35px);
    }
    .block-drawer__toggle-btn {
        flex-wrap: wrap;
        justify-content: flex-start;
        height: auto;
        gap: 12px;
    }
    .block-drawer__media {
        order: -1;
        flex: 1 1 100%;

    }
    .block-drawer__media-element {
        height: 63px;
        transition: 0.2s ease-out 0s;
    }
    .block-drawer__toggle-btn[aria-expanded="true"] .block-drawer__media-element {
        transition: 0.2s ease-out 0s;
    }
    .block-drawer__toggle-btn[aria-expanded="true"] .block-drawer__media,
    .block-drawer__toggle-btn[aria-expanded="true"] .block-drawer__media-element {
        height: 306px;
    }


    .block-drawer .is-style-3-5.block-columns .block-columns__columns,
    .block-drawer .is-style-5-6.block-columns .block-columns__columns {
        gap: 17px;
    }
    .block-drawer .is-style-3-5.block-columns .block-columns__columns .block-h3,
    .block-drawer .is-style-5-6.block-columns .block-columns__columns .block-h3{
        margin-bottom: 0;
    }
    .block-drawer .is-style-3-5.block-columns,
    .block-drawer .is-style-3-5.block-columns .block-column__content > :last-child,
    .block-drawer .is-style-3-5.block-columns .block-column__content > .wp-block-buttons,
    .block-drawer .is-style-5-6.block-columns,
    .block-drawer .is-style-5-6.block-columns .block-column__content > :last-child,
    .block-drawer .is-style-5-6.block-columns .block-column__content > .wp-block-buttons{
        margin-bottom: 0;
    }

    .is-style-5-6 .block-drawer__media .icon {
        right: 0;
        left: 50%;
    }
    .is-style-5-6 .block-drawer__push {
        --custom-theme-flex-span: 9;
    }
    .is-style-5-6 .block-drawer__content {
        max-width: none;
        padding: 19px 0 0 0;
    }
    .has-bg-grey-background-color .block-drawer__media {
        border: 1px solid var(--wp--preset--color--red);
    }

    .has-bg-grey-background-color .block-drawer__toggle-btn[aria-expanded="true"] .block-drawer__media {
        border-color: transparent;
    }
}