/*******************************************************************************
 *                                                                             *
 *   Мост Безопасности // Адаптируемый стиль для страницы видеороликов         *
 *   ----------------------------------------------------------------------    *
 *   Copyright (C) 1998-2018 Studio "Cherry-Design"                            *
 *   URL: http://www.cherry-design.ru/                                         *
 *   E-mail: mike@cherry-design.ru                                             *
 *                                                                             *
 *******************************************************************************/

/* Максимальная ширина
-------------------------------------------------------------------------------*/

@media screen and (min-width: 480px) and (max-width: 980px) {

    .content_video, .content_video_inner, .video_text_inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (min-width: 480px) {

    .content_video {
        border-top: none;
    }
}

@media screen and (min-width: 981px) {

    .content_video, .content_video_inner, .video_text_inner {
        width: 980px;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Видеоролики
-------------------------------------------------------------------------------*/

@media screen and (min-width: 320px) and (max-width: 640px) {

    .content_video_inner ul.gallery li {
        width: calc((100% - 20px) / 2);
        margin-right: 20px;
    }

    .content_video_inner ul.gallery li:nth-child(2n) {
        margin-right: 0;
    }
}

@media screen and (min-width: 641px) and (max-width: 800px) {

    .content_video_inner ul.gallery li {
        width: calc((100% - 40px) / 3);
        margin-right: 20px;
    }

    .content_video_inner ul.gallery li:nth-child(3n) {
        margin-right: 0;
    }

    .content_video_inner ul.similar li:nth-child(4n) {
        display: none;
    }
}

@media screen and (min-width: 801px) {

    .content_video_inner ul.gallery li {
        width: calc((100% - 60px) / 4);
        margin-right: 20px;
    }

    .content_video_inner ul.gallery li:nth-child(4n) {
        margin-right: 0;
    }
}

/* Видеоролики (описание)
-------------------------------------------------------------------------------*/

@media screen and (min-width: 640px) {

    .content_video_inner .video_description {
        columns: 2;
    }
}