@media (max-width: 1200px) {
    .video-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .video-list {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 768px) {
    .navbar {
        gap: 1rem;
    }

    .navbar .nav-center,
    body.show-mobile-search .navbar .nav-left,
    body.show-mobile-search .navbar .nav-right {
        display: none;
    }

    .navbar .nav-right .search-button,
    body.show-mobile-search .navbar .search-back-button,
    body.show-mobile-search .navbar .nav-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-layout .screen-overlay {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 15;
        width: 100%;
        height: 100vh;
        background: var(--overlay-dark-color);
        transition: 0.2s ease;
    }

    body.sidebar-hidden .main-layout .screen-overlay {
        opacity: 0;
        pointer-events: none;
    }

    .main-layout .sidebar {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 20;
        height: 100vh;
        transition: 0.2s ease;
    }

    body.sidebar-hidden .main-layout .sidebar {
        left: -280px;
    }

    .main-layout .sidebar .nav-left {
        display: flex;
    }

    .related-videos {
        grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    }
}

@media (max-width: 600px) {

    .video-details .title {
        font-size: 16px;
        -webkit-line-clamp: 2;
    }

    .video-details .channel-name,
    .video-details .views {
        font-size: 14px;
    }

    .playlist-video {
        flex-direction: column !important;
    }

    .playlist-video .thumbnail-container {
        width: 100% !important;
    }

    .playlist-grid {
        grid-template-columns: 1fr !important;
    }

    .related-videos {
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }

    .video-stats {
        font-size: 12px !important;
    }
}

@media (max-width: 425px) {
    .video-list {
        grid-template-columns: 1fr !important;
        padding: 0;
    }

    .slider {
        padding: 0;
    }

    .slider .icon {
        display: none;
    }

    .related-videos {
        grid-template-columns: repeat(1, minmax(120px, 1fr)) !important;
    }

    .action-button i {
        font-size: 18px;
    }

    .video-actions {
        flex-direction: column;
        gap: 14px;
    }

}

@media (max-width: 1024px) {
    .watch-container {
        flex-direction: column;
    }

    .comments-header,
    .add-comment,
    .pinned-comment,
    .comment {
        display: none !important;
    }

    .comment-button {
        display: flex !important;
    }

    .video-description {
        margin-bottom: 0 !important;
    }

    .related-videos {
        min-width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(120px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .related-videos .category-list {
        display: none !important;
    }

    .related-videos .video-card {
        flex-direction: column !important;
    }

    .related-videos .thumbnail-container {
        width: 100% !important;
    }
}