#section__video{
    margin-bottom: calc(var(--spacing)*2);

    .btn__deploy{
        margin-top: calc(var(--spacing)*1);
        --size: var(--h-block);
        font-family: var(--font);
        font-size: var(--fs-small);
        font-weight: var(--fw-normal);
        line-height: 1;
        border: var(--border-light);
        height: var(--size);
        border-radius: calc(var(--size)/2);
        padding-left: 1.5ch;
        padding-right: 2ch;
        padding-top: 1px;
    
        position: relative;
        cursor: pointer;
    
        display: flex;
        align-items: center;
        gap: 1ch;
        // padding-right: 0.5ch;
        font-weight: var(--fw-medium);
        text-decoration: none;

        &:hover{
            background-color: var(--grey-800);
            border-color: var(--color-txt);
        }

      
    
        cursor: pointer;

        svg{ 
            fill: var(--color-txt);
            width: 10px;
            position: relative;
            top: 1px; 
            left: 1px;
        }
    
    }


    .videos__ul{
        list-style: none;
        width: 100%;
        margin-top: calc(var(--spacing)*1);
        display: none;

        .videos__li{

            position: relative;
            padding-left: 40px;
            padding-right: 2ch;
            // padding-top: calc(var(--spacing)*0.25);
            // padding-bottom: calc(var(--spacing)*0.25);
            // border-top: var(--border-light);
            // border-bottom: var(--border-light);

            margin-bottom: calc(var(--spacing)*0.75);

            cursor: pointer;

            @media screen and (max-width: 520px){
                .br-desktop{ display: none; }
            }
      

            &:hover{
                color: var(--grey-100);
            }
        
            .icon{
                --size: 20px;
                flex-shrink: 0;
                width: var(--size);
                height: var(--size);
                border-radius: calc(var(--size)/2);
                border: var(--border);
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                left: 0px;

            }

            svg{
                fill: var(--color-txt);
                width: 7px; 
            }
        }
    }

    #videos__input{ display: none }

    #videos__input:checked ~ .videos__ul{
        display: block;
    }
}


#video__fullscreen{

    width: 100vw;
    height: 100vh;
    background-color: var(--color-bg);
    padding: var(--padding-body);
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 3000;
    

    iframe{
        width: 90%;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        border: var(--border);
    }

    #video__close{
        height: 60px;
        font-size: 20px;
        width: 100%;
        font-weight: bold;
        display: flex; 
        align-items: top;
        justify-content: flex-end;

    }
}

body.is-fullscreen{
    overflow: hidden;
}