@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-video-01 {
    * { .fx(); }
    position: relative;
    overflow: hidden;
    .grid {
        .grid(1fr auto; 30px; stretch);
        .video {
            iframe {
                display: block;
                margin-bottom: 5px;
            }
            h4 {
                padding: 15px 0;
            }
            div > div {
                font-size: .85em;
                padding-right: 10px;
                a {
                    color: #09B;
                    text-decoration: none;
                    &:hover {
                        opacity: 70%;
                    }
                }
                p:not(:last-child) {
                    margin-bottom: 10px;
                }
            }
        }
        aside {
            width: 400px;
            display: block;
            border-radius: 4px;
            background: #5671;
            header {
                border-bottom: 1px solid #1232;
                background: linear-gradient(#7892, #7893);
                padding: 10px 20px;
            }
            h4 {
                font-size: 1.2em;
                + span {
                    font-size: .8em;
                    opacity: 70%;
                }
            }
            ul {
                list-style-type: none;
                padding: 20px 10px;
                font-size: .7em;
                overflow-y: scroll;
                max-height: 100px;
                li {
                    cursor: pointer;
                    user-select: none;
                    a {
                        .grid(auto 1fr 2.2fr; 8px;);
                        text-decoration: none;
                        color: #123;
                        padding: 7px 5px;
                        border-radius: 5px;
                        img {
                            display: block;
                            width: 100%;
                            border-radius: 5px;
                        }
                        span p {
                            opacity: 60%;
                            margin-top: 3px;
                        }
                    }
                    &.active a {
                        background: #FFF;
                    }
                    &:not(.active):hover a {
                        background: #1231;
                    }
                }
            }
        }
    }
}

.drs-others-video-01 {
    .container {
        padding-top: 0;
    }
    header {
        .grid(100px auto 1fr; 20px);
        margin-bottom: 20px;
        hr {
            border: none;
            border-top: 1px solid #EEE;
            border-bottom: 1px solid #345;
        }
    }
    .grid {
        .grid(1fr 1fr 1fr 1fr 1fr; 15px; stretch);
        a {
            text-decoration: none;
            color: #123;
            font-size: .95em;
            padding: 5px;
            border: 1px solid #5671;
            background: #6781;
            border-radius: 4px;
            .fx();
            img {
                display: block;
                width: 100%;
                border-radius: 3px;
            }
            span {
                display: block;
                padding: 5px 3px;
                p {
                    opacity: 60%;
                    font-size: .85em;
                    margin-top: 3px;
                }
            }
            &:hover {
                border-color: #1236;
                background: #FFF;
            }
        }
        .category {
            b {
                background: #789;
                padding: 2px 10px;
                border-radius: 3px;
                font-size: .85em;
                color: #FFF;
            }
        }
    }
}

@media screen and ( max-width: 1300px ){
    .drs-others-video-01 {
        .grid {
            .grid(1fr 1fr 1fr 1fr; 15px);
        }
    }
}

@media screen and ( max-width: 1100px ){
    .drs-video-01 {
        .grid {
            .grid(1fr; 20px);
            overflow: hidden;
            .video {
                div > div {
                    display: none;
                }
            }
            aside {
                width: 100%;
                ul {
                    .flex();
                    grid-gap: 5px 2%;
                    height: 420px;
                    max-height: 420px;
                    padding: 10px;
                    li {
                        width: 49%;
                    }
                }
            }
        }
    }
}

@media screen and ( max-width: 1050px ){
    .drs-others-video-01 {
        .grid {
            .grid(1fr 1fr 1fr; 15px);
        }
    }
}

@media screen and ( max-width: 950px ){
    .drs-video-01 {
        .grid {
            aside {
                ul {
                    font-size: .85em;
                    padding: 15px 10px;
                    align-items: start;
                    li {
                        list-style-position: inside;
                        width: 32%;
                        a {
                            .grid(1fr; 5px);
                            height: 100%;
                            span {
                                padding: 3px;
                                font-size: .9em;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and ( max-width: 850px ){
    .drs-others-video-01 {
        .grid {
            .grid(1fr; 10px);
            a {
                .grid(200px 1fr; 10px);
                grid-template-areas: "imgV catV" "imgV spnV";
                > img { grid-area: imgV; }
                > .category { grid-area: catV; }
                > span:not(.category){ 
                    grid-area: spnV; 
                    transform: translateY(-30px);
                    font-size: 1.3em;
                }
            }
        }
    }
}

@media screen and ( max-width: 750px ){
    .drs-video-01 {
        .grid {
            aside {
                ul {
                    font-size: .8em;
                    li {
                        width: 49%;
                    }
                }
            }
        }
    }
}

@media screen and ( max-width: 580px ){
    .drs-video-01 {
        .grid {
            aside {
                ul {
                    font-size: .7em;
                    li {
                        width: 100%;
                        a {
                            .grid(auto 1fr 2.2fr; 8px;);
                        }
                    }
                }
            }
        }
    }
    .drs-others-video-01 {
        header {
            .grid(auto auto 1fr; 10px);
        }
        .grid a {
            .grid(145px 1fr; 10px);
            > span:not(.category){ 
                transform: translateY(-5px);
                font-size: 1.1em;
            }
        }
    }
}

@media screen and ( max-width: 400px ){
    .drs-others-video-01 {
        .grid a {
            .grid(1fr; 10px);
            grid-template-areas: "imgV" "catV" "spnV";
            > span:not(.category){ 
                transform: translateY(-5px);
                font-size: 1.1em;
            }
        }
    }
}