/* ========== ПЛАНШЕТЫ ========== */
@media (max-width: 1024px) {
    
}

/* ========== ТЕЛЕФОНЫ (горизонтально) ========== */
@media (max-width: 768px) {
    
}

/* ========== ТЕЛЕФОНЫ (вертикально) ========== */
@media (max-width: 480px) {

    .header_ins {
        width: 95%;
        justify-content: space-between;
    }

        .header_logo {
            width: auto;
            padding-left: 0.5rem;
        }
            .header_logo img {
                height: 1.5rem;
            }
        /* при получении фокуса */
        .header_search_is_active .header_logo {
            opacity: 0;
            width: 0;
        }

        .header_search_is_active .header_search {
            width: 100%;
        }
                .search_field {
                    width: 50vw;
                }
                /* поле при получении фокуса */
                .header_search_is_active .search_field {
                    width: 100%;
                }

    .main_content {
        margin: 2rem 0;
    }
        .main_content_ins {
            width: 100%;
            justify-content: center;
        }
        /* расположение контента и правого сайдбара для страницы видео и скачивания */
        .main_content.video_page .main_content_ins,
        .main_content.download_page .main_content_ins {
            flex-direction: column;
            grid-gap: 2rem;
        }

    .under_sidebar_layer {
        position: fixed; top: 0; left: 0; z-index: 4;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.5);
        transition: 0.3s;
        opacity: 0; visibility: hidden;
    }
    body[left_sidebar_visible] .under_sidebar_layer,
    body[right_sidebar_visible] .under_sidebar_layer {
        opacity: 1; visibility: visible;
    }
    .left_sidebar, .right_sidebar {
        width: 80%; height: 100vh;
        background: var(--background_light_2);
        transform: translateX(0);
        transition: 0.3s;
        position: fixed; top: 0; z-index: 5;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
    }
    .left_sidebar {
        left: 0;
        transform: translateX(-100%);
        opacity: 0;
        overflow-y: auto;
    }
    body[left_sidebar_visible='true'] .left_sidebar {
        opacity: 1;
        transform: translateX(0);
    }
    .right_sidebar {
        right: 0;
        transform: translateX(100%);
        opacity: 0;
        overflow-y: auto;
    }
    body[right_sidebar_visible='true'] .right_sidebar {
        opacity: 1;
        transform: translateX(0);
    }

    /* для страницы видео и скачивания перемещу похожие видео под карточку видео */
    .main_content.download_page .right_sidebar,
    .main_content.video_page .right_sidebar {
        position: relative; top: auto; right: auto; z-index: 0;
        overflow-y: hidden;
        opacity: 1;
        transform: translateX(0);
        width: 100%; height: auto;
        background: transparent;
        box-shadow: none;
    }

    .similar_videos_title {  
        font-size: 1.5rem;
    }
    .similar_videos {
        padding: 0 1rem;
    }
    .others_watching {
        box-shadow: none;
    }

    /* кнопки сайдбаров */
    .showSidebarButton {
        position: fixed; bottom: 1rem; z-index: 10;
        display: inline-flex; align-items: center; justify-content: center;
        width: 2rem; height: 2rem;
        border-radius: 50%;
        background: var(--background_dark_2);
        box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
        border: 0.1rem solid var(--pink_prime);
        transition: 0.5s;
    }
    .showSidebarButtonHidden {
        visibility: hidden; opacity: 0;
    }
    .showSidebarButtonLeft {
        left: 1rem;
    }
    .showSidebarButtonRight {
        right: 1rem;
        border-color: var(--purple_prime);
    }
    /* скрою кнопку показа правого сайдбара для страницы видео и скачивания */
    .main_content.video_page .showSidebarButtonRight,
    .main_content.download_page .showSidebarButtonRight {
        display: none;
    }
    .showSidebarButtonLeft:before {
        content: '‹';
        font-size: 2rem; font-weight: bold;
        color: var(--pink_prime);
        transform: translate(-10%, -7%);
    }
    .showSidebarButtonRight:after {
        content: '›';
        font-size: 2rem; font-weight: bold;
        color: var(--purple_prime);
        transform: translate(10%, -7%);
    }

    .content {
        width: 100%;
        padding: 0.75rem; margin: 0;
    }
    .content_ins {
        padding: 0;
    }

    /* для страницы видео уберу отступы карточки видео чтобы не было разрыва с Также смотрите */
    .main_content.video_page .video_card {
        margin: 0;
    }

    .video_card[orientation='vertical'],
    .video_card[orientation='semivertical'],
    .video_card[orientation='square'] {
        flex-direction: column;
    }
    .video_card[orientation='vertical'] .video_player_container,
    .video_card[orientation='semivertical'] .video_player_container,
    .video_card[orientation='square'] .video_player_container {
        width: 100%;
    }
    .video_card[orientation='vertical'] .video_card_wrap_info,
    .video_card[orientation='semivertical'] .video_card_wrap_info,
    .video_card[orientation='square'] .video_card_wrap_info {
        width: 100%;
    }

    .download_content {
        padding: 1.5rem 1rem;
    }
        .download_content[orientation='horizontal'] .download {
            flex-direction: column;
        }
            .download_content[orientation='horizontal'] .download img,
            .download_content[orientation='semihorizontal'] .download img
            { /* постер */
                max-height: auto; max-width: 100%;
                width: 100%;
            }
            .download_info > div:first-of-type { /* название */
                margin-bottom: 1rem;
            }
            .download_info > div:nth-of-type(2) { /* размер */
                margin-bottom: 1rem;
                font-size: 0.9em;
                color: #aaa;
            }
            .download_button {
                font-weight: bold;
                color: rgb(26, 141, 255);
                cursor: pointer;
                font-size: 0.9em;
            }
            .download_button:hover {
                text-decoration: underline;
            }

}