.frame-type-container-quotes-slider {
    #maincontent .inner & .inner {
        margin: 0;
    }
}

.quotes-slider-container {
    --quotes-slider-side-margin: 50px;
    --quotes-slider-arrow-size: 26px;
    --quotes-slider-color: #243d51;
    --quotes-slider-dot-size: 10px;
    --quotes-slider-dot-gap: 8px;
    --quotes-slider-transition: transform 0.45s cubic-bezier(.22, 1, .36, 1);

    position: relative;

    .quotes-slider-track {
        overflow: hidden;
        width: 100%;
        margin: 0 auto;

        .quotes-slider {
            display: flex;
            width: max-content;
            align-items: flex-start;
            transition: var(--quotes-slider-transition);
        }

        .quotes-slide {
            flex-shrink: 0;
            box-sizing: border-box;
        }
    }

    .quotes-slider-arrows {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 10;
        display: none;

        @media (min-width: 1200px) {
            display: block;
        }

        .quotes-slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: var(--quotes-slider-arrow-size);
            color: var(--quotes-slider-color);
            cursor: pointer;
            background: none;
            border: none;
            padding: 8px;
            line-height: 1;
            pointer-events: auto;
            transition: color 0.2s, opacity 0.3s;

            &:hover { color: var(--quotes-slider-color); }

            &[aria-disabled="true"] {
                opacity: 0;
                pointer-events: none;
            }
        }

        .quotes-slider-arrow--prev { left: -50px; }
        .quotes-slider-arrow--next { right: -50px; }
    }

    .quotes-slider-dots {
        display: flex;
        justify-content: center;
        gap: var(--quotes-slider-dot-gap);
        margin-top: 20px;
    }

    button.quotes-slider-dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: transparent;
        color: #000;
        border: 1px solid #000;
        padding: 0;
        cursor: pointer;
        transition: background-color 0.2s;

        &.is-active {
            background: #000;
        }

        &:hover {
            background: #000;
        }
    }

    @media (max-width: 680px) {
        --quotes-slider-side-margin: 32px;
    }
}