www-main-desktop-home-page-skeleton.css

#home-page-skeleton{
    background:#36393e;
    position:relative;
    z-index:0;
    pointer-events:none;
    min-width:0;
    opacity:1;
    margin:56px 0 0;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row
}

#home-page-skeleton.hidden:not(.layered){
    opacity:0
}

#guide-skeleton{
    display:none;
    background-color:hsl(0,0%,100%);
    width:240px;
    -webkit-flex-shrink:0;
    flex-shrink:0
}

@media (min-width:792px){
    #home-page-skeleton #guide-skeleton{
        display:-moz-flexbox;
        display:-ms-flexbox;
        display:-webkit-flex;
        display:flex
    }
}

@media (min-width:792px) and (max-width:1311px){
    #home-page-skeleton #guide-skeleton{
        width:72px
    }
}

#home-container-skeleton{
    background-color:hsl(0,0%,98%);
    overflow:hidden
}

#home-page-skeleton .text-shell{
    border-radius:2px
}

#home-page-skeleton .skeleton-bg-color{
    background-color:hsl(0,0%,89%)
}

html[dark] #home-page-skeleton .skeleton-bg-color,html[dark] #guide-skeleton{
    background-color:hsl(0,0%,16%)
}

html[dark] #home-container-skeleton{
    background-color:hsl(0,0%,12%)
}

#home-container-media{
    border-bottom:none;
    margin:24px -16px 0 24px;
    max-width:2256px;
    padding-right:24px;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    -moz-justify-content:center;
    -webkit-justify-content:center;
    justify-content:center;
    -ms-flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap
}

#home-page-skeleton .rich-grid-media-skeleton{
    margin:0;
    flex-basis:320px;
    min-width:320px;
    max-width:360px;
    -webkit-flex-grow:1;
    flex-grow:1
}

@media only screen and (min-width:720px) and (max-width:1631px){
    #home-page-skeleton .rich-grid-media-skeleton.mini-mode{
        flex-basis:240px;
        min-width:240px;
        max-width:320px
    }
}

@media only screen and (min-width:1552px) and (max-width:1631px){
    #home-page-skeleton .rich-grid-media-skeleton.mini-mode{
        width:calc(25% - 16px);
        flex-basis:auto;
        -webkit-flex-grow:0;
        flex-grow:0
    }
}

@media only screen and (min-width:2528px){
    #home-page-skeleton .rich-grid-media-skeleton{
        width:calc(16.6% - 16px);
        flex-basis:auto;
        -webkit-flex-grow:0;
        flex-grow:0
    }
}

@media only screen and (min-width:392px){
    #home-page-skeleton .rich-grid-media-skeleton{
        margin:0 16px 0 0
    }
}

#home-page-skeleton .video-details{
    padding-bottom:40px;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column
}

#home-page-skeleton .rich-thumbnail{
    position:relative;
    width:100%
}

#home-page-skeleton .rich-thumbnail:before{
    display:block;
    content:"";
    width:100%;
    padding-top:56.25%;
    background-color:rgba(0,0,0,0.1)
}

#home-page-skeleton .details{
    display:flex
}

#home-page-skeleton .channel-avatar{
    border-radius:50%;
    height:36px;
    margin-top:12px;
    margin-right:12px;
    width:36px
}

#home-page-skeleton .details-text-shell{
    flex:1 1 auto
}

#home-page-skeleton .rich-video-title{
    width:90%;
    height:20px;
    margin:10px 0
}
#home-page-skeleton .rich-video-meta{
    width:60%;
    height:20px;
    margin:10px 0
}