.accordion-horizontal {
    --color-header: #525252;

    display: flex;
    position: relative;
    width: 100%;
    min-height: 294px;
    gap: 16px;
    container-type: inline-size;

    @media (max-width: 990px ) {
        overflow: hidden;
        flex-direction: column;
    }

    .accordion-item-content-inner {
        transform-origin: 50% 0;
        padding-top: 16px;
        padding-bottom: 12px;
    }

    h3 {
        color: #0082C8;
        font-size: 16px;
        line-height: 23px;
        font-weight: bold;
        letter-spacing: 0;
    }

    .accordion-item {
        flex-shrink: 1;
        position: relative;
        min-height: unset;
        contain: layout style;

        padding: 1.44rem 0;
        border-radius: 8px;
        border-bottom: none;
        background-color: var(--bg-item-color, rgba(255, 255, 255, 0.8));
        cursor: pointer;
        opacity: 0.94;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            background-image: var(--bg-image);
            background-size: cover;
            background-position: left;
            background-repeat: no-repeat;
            border-radius: 8px;
            opacity: 0.94;
        }

        &.accordion-item-active {
            cursor: default;
            z-index: 10;

            .accordion-item-close {
                display: flex;
            }

            .accordion-item-content {
                opacity: 1;
                pointer-events: auto;
                @media (max-width: 990px ) {
                    overflow-y: auto
                }
            }

        }
    }

    .accordion-item-title {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        gap: 8px;
        align-items: center;
        white-space: nowrap;
        transform-origin: center center;
        font-size: 22px;
        font-weight: 300;
        color: var(--color-text);
        user-select: none;
        cursor: pointer;
        z-index: 10;
    }

    .accordion-item-content {

        position: relative;
        z-index: 11;

        @media (min-width: 991px ) {
            width: calc(100cqi - (var(--accordion-item-count) - 1) * (77px + 16px));
            padding: calc(26px + 36px) 31px 0 31px;
        }

        @media (max-width: 990px ) {
            padding: 0 31px;
            position: absolute;
            overflow: hidden;
            top: calc(26px + 36px);
            bottom: 8px;

        }

        opacity: 0;
        pointer-events: none;
    }

    .accordion-item-close {
        display: none;
        position: absolute;
        top: 17px;
        right: 18px;
        align-items: center;
        justify-content: center;
        z-index: 20;

        width: 19px;
        height: 19px;
        padding: 0;

        background: transparent;
        color: #939393;
        cursor: pointer;
    }
}