.hausformat_artisetquotes {
    --hf-quote-inner-gutter: var(--gl-gutter);
    overflow: hidden;

    .cb-carousel-swiper {
        --swiper-pagination-bullet-horizontal-gap: 4px;
        --swiper-pagination-bullet-size: 16px;
        --swiper-pagination-bullet-opacity: 1;
        --swiper-pagination-color: var(--hf-color-prim);
        --swiper-pagination-bullet-inactive-color: var(--hf-color-sec-80);
        --swiper-pagination-bullet-inactive-opacity: 0.2;
        --swiper-navigation-size: 60px;
        --swiper-navigation-color: var(--hf-color-prim);

        position: relative;
        overflow-x: visible;

        @media (min-width: 769px) {
            padding-top: calc(var(--swiper-navigation-size) * 1.2);
        }

        .swiper-buttons {
            position: absolute;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            gap: 0.5em;
            position: absolute;
            top: 0;
            right: 0;

            .swiper-button-next,
            .swiper-button-prev {
                position: relative;
                top: auto;
                right: auto;
                left: auto;
                display: flex !important;
                justify-content: center;
                align-items: center;
                width: var(--swiper-navigation-size);
                height: var(--swiper-navigation-size);
                background-color: var(--hf-btn-secondary-bg-color);
                border-radius: 50%;
                margin-top: 0;
                visibility: visible;
                opacity: 1;
                z-index: 4;
                transition: background-color 0.3s ease;

                &.swiper-button-disabled {
                    opacity: 0.3;
                    cursor: default;
                    pointer-events: none;
                }

                &::after {
                    font-size: calc(var(--swiper-navigation-size) / 3);
                    content: '\ea0a';
                    font-family: 'hfThemesIcons';
                }

                &:hover {
                    background-color: var(--hf-btn-secondary-bg-color-hover);    
                }
            }

            .swiper-button-prev::after {
                transform: rotate(180deg);
            }

            @media (max-width: 768px) {
                display: none;
            }
        }

        .swiper-pagination {
            position: relative;
            top: auto;
            bottom: auto;
            margin-top: 1.5em;

            .swiper-pagination-bullet {
                transform: scale(0.75);
                transition: transform 0.3s ease;
                border: none;
                &.swiper-pagination-bullet-active {
                    transform: scale(1);
                }
            }
        }
    }

    .cb-artisetquotes-item {
        position: relative;
    }

    .cb-artisetquotes-image {
        position: relative;
        z-index: 1;
        min-width: 200px;
        max-width: 300px;
        width: calc((100% / 12 * 10) + calc(var(--hf-quote-inner-gutter) / 12 * 10));

        @media (min-width: 769px) {
            position: absolute;
            top: 0;
            left: 0;
            max-width: unset;
            width: calc((100% / 12 * 4) + calc(var(--hf-quote-inner-gutter) / 12 * 4));
        }
    }

    .cb-artisetquotes-content-wrapper.has-image {
        @media (min-width: 769px) {
            padding-top: calc(var(--hf-quote-inner-gutter) * 2);
        }
    }

    .cb-artisetquotes-content {
        background-color: var(--hf-box-bg-color-teaser-grey);
        padding-block: calc(var(--hf-quote-inner-gutter) * 2);
        padding-inline: var(--hf-quote-inner-gutter);
        
        .has-image & {
            box-shadow: 0 -10em 0 var(--hf-box-bg-color-teaser-grey);
        }

        @media (min-width: 769px) {
            padding-inline: calc((100% / 12) + calc(var(--hf-quote-inner-gutter) / 12));
            .has-image & {
                padding-left: calc((100% / 12 * 4) + calc(var(--hf-quote-inner-gutter) / 12 * 4));
                box-shadow: none;

                > div {
                    min-height: 17em;
                }
            }
        }
    }
 
    .cb-artisetquotes-infotext {
        margin-top: 1em;
        
        span.position {
            display: block;
            font-weight: 300;
        }
    }

}