/* CONTENEDOR GENERAL */

.ycs-container{
	background: linear-gradient(
		to right,
		rgba(242,183,5,0.45),
		rgba(166,13,26,0.45),
		rgba(3,90,166,0.45)
	);

	border-radius:10px;
	padding:10px;
	gap:20px;

	display:grid;
	grid-template-columns:4fr 1fr;

	width:100%;
}

/* VIDEO PRINCIPAL */

.ycs-player{
    height: 100%;
}

.ycs-player iframe{
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
    border:0;
}


/* SIDEBAR DE VIDEOS */

.ycs-sidebar{
    width:180px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}


/* ITEM DE VIDEO */

.ycs-item{
    display:flex;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    padding:6px;
    border-radius:8px;
    transition:background .2s;
}

.ycs-item:hover{
    background:#f2f2f2;
}


/* MINIATURA */

.ycs-item img{
    width:100%;
    border-radius:6px;
}

/* TITULO */

.ycs-item span{
    font-size:13px;
    line-height:1.3;
}


/* SCROLLBAR BONITA */

.ycs-sidebar::-webkit-scrollbar{
    width:6px;
}

.ycs-sidebar::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:4px;
}


/* RESPONSIVE */

@media (max-width:900px){

    .ycs-container{
        flex-direction:column;
    }

    .ycs-sidebar{
        width:100%;
        max-height:none;
        flex-direction:row;
        overflow-x:auto;
        overflow-y:hidden;
    }

    .ycs-item{
        min-width:200px;
        flex-direction:column;
        align-items:flex-start;
    }

    .ycs-item img{
        width:100%;
    }

}