.page-customer-results-video-learning {
    --video-item-thumb-display: flex;
    --video-item-arrow-display: block;
    --video-item-flex-direction: row;

    --video-index-font-size: 36px;
    --video-title-small-font-size: 24px;
    --video-title-large-font-size: 32px;
    --video-item-arrow-size: 72px;

    @media (width <= 880px) {
        --video-item-thumb-display: none;
        --video-item-flex-direction: column;
    }

    @media (width <= 576px) {
        --video-index-font-size: 20px;
        --video-title-small-font-size: 20px;
        --video-title-large-font-size: 24px;
        --video-item-arrow-size: 48px;
        --video-item-arrow-display: none;
    }

    .video-container {
        position: relative;
        z-index: 9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        overflow: hidden;
        transition: all 1s linear;

        &.theater-mode {
            box-shadow:
                0 0 0 2px rgb(from var(--color-btm-dark-blue) r g b / 0.5),
                0 0 0 10000px rgb(from #000 r g b / 0.5)
            ;
        }

        .video-close {
            position: absolute;
            z-index: 10;
            top: 16px;
            right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            background-color: var(--color-btm-dark-blue);

            &:before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                background-color: #fff;
                mask: url('/assets/svg/close-6ltwXpU.svg') no-repeat center center / contain;
            }
        }

        .video-player {
            position: relative;
            z-index: 1;

            video {
                display: block;
                margin: 0;
                padding: 0;
                border: 0;
                width: 100%;
                height: auto;
            }
        }
    }

    .videos-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: start;
        gap: 24px;
    }

    .video-item {
        --background-image: none;

        --item-color-index: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
        --item-color-title-small: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
        --item-color-title-large: var(--color-btm-dark-blue);
        --item-color-play-button: #fff;
        --item-thumb-play-display: block;
        --item-thumb-play-size: 36px;

        --icon-control: url('/assets/svg/controls-play-snA9QmY.svg');

        --shadow-color: rgb(from #0035b8 r g b / 0.15);
        --corner-color: rgb(from #0035b8 r g b / 0.15);
        --background-color: #fef5ec;
        --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
        --arrow-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
        --label-color: rgb(from var(--color-btm-dark-blue) r g b / 0.4);
        --details-color: var(--color-btm-dark-blue);
        --title-underline-color: rgb(from var(--outline-color) r g b / 0.075);

        &.item-selected,
        &:hover {
            --item-color-index: #fff;
            --item-color-title-small: rgb(from #fff r g b / 0.75);
            --item-color-title-large: var(--color-da-orange);
            --item-color-play-button: var(--color-da-orange);
            --item-thumb-play-size: 40px;

            --title-color: var(--color-da-orange);
            --shadow-color: var(--color-da-orange);
            --corner-color: var(--color-da-orange);
            --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
            --grid-color: #fef5ec;
            --background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
            --arrow-color: var(--color-da-orange);
            --label-color: #fff;
            --details-color: #fff;
            --title-underline-color: rgb(from #fff r g b / 0.25);
        }

        &.item-selected {
            z-index: 9;
            --item-thumb-play-display: none;
        }

        &.state-playing {
            --icon-control: url('/assets/svg/controls/pause-IbJ5ldl.svg');
        }

        position: relative;
        display: flex;
        flex-direction: var(--video-item-flex-direction);
        align-items: stretch;
        justify-content: start;
        gap: 24px;
        padding: 24px;
        border-radius: 16px;
        text-decoration: none;
        overflow: hidden;
        box-shadow:
            0 0 0 1px var(--outline-color),
            4px 4px 0 4px var(--shadow-color)
        ;
        scroll-margin-top: var(--navigation-height-default);
        transition: all .2s linear;
        background-color: var(--background-color);

        &:before {
            content: '';
            display: block;
            position: absolute;
            width: 88px;
            height: 88px;
            right: 0;
            bottom: 0;
            transition: all .2s linear;
            transform: translate(50%, 50%) rotate(45deg);
            background-color: var(--corner-color);
        }

        &:after {
            content: '';
            display: var(--video-item-arrow-display);
            position: absolute;
            width: var(--video-item-arrow-size);
            height: 100%;
            right: 24px;
            top: 0;
            transition: all .2s linear;
            background-color: var(--arrow-color);
            mask: var(--icon-control) no-repeat center;
        }

        .video-thumb {
            flex: 0.5;
            position: relative;
            display: var(--video-item-thumb-display);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            aspect-ratio: 16/9;
            background-size: 125%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: var(--background-image);
            background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
            box-shadow: 0 0 0 1px rgb(from var(--color-btm-dark-blue) r g b / 0.25);

            &:before {
                content: '';
                position: absolute;
                z-index: 2;
                display: var(--item-thumb-play-display);
                width: var(--item-thumb-play-size);
                height: var(--item-thumb-play-size);
                transition: all 0.3s ease-in-out;
                mask: url('/assets/svg/controls-play-snA9QmY.svg') no-repeat center / contain;
                background-color: var(--item-color-play-button);
            }

            &:after {
                content: '';
                position: absolute;
                z-index: 1;
                display: var(--item-thumb-play-display);
                width: calc(var(--item-thumb-play-size) * 2);
                height: calc(var(--item-thumb-play-size) * 2);
                border-radius: 50%;
                transition: all 0.3s ease-in-out;
                transform: translateX(-4px);
                background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
            }

            .video-length {
                position: absolute;
                right: 12px;
                bottom: 12px;
                padding: 6px 12px;
                border-radius: 8px;
                font-size: 18px;
                line-height: 1;
                font-weight: 500;
                color: #fff;
                font-family: 'Roboto Condensed', sans-serif;
                background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
            }
        }

        .video-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: space-between;
            gap: 24px;

            .video-header {
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 24px;

                .video-index {
                    font-size: var(--video-index-font-size);
                    line-height: 1;
                    font-weight: 700;
                    color: var(--item-color-index);
                    font-family: 'Roboto Condensed', sans-serif;
                }

                .video-title {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: start;
                    gap: 8px;

                    .title-small {
                        font-size: var(--video-title-small-font-size);
                        line-height: 1;
                        font-weight: 600;
                        text-transform: capitalize;
                        color: var(--item-color-title-small);
                        font-family: 'IBM Plex Sans', sans-serif;
                        transition: all .2s linear;
                    }

                    .title-large {
                        font-size: var(--video-title-large-font-size);
                        line-height: 1;
                        font-weight: 600;
                        text-transform: uppercase;
                        color: var(--item-color-title-large);
                        font-family: 'IBM Plex Sans', sans-serif;
                        transition: all .2s linear;
                    }
                }
            }

            .video-footer {
                padding-right: 20%;
                font-size: var(--typography-font-size-p);
                line-height: 1.325;
                font-weight: 400;
                color: var(--details-color);
                transition: all .2s linear;
            }
        }
    }
}