Youtube 6 columns

youtube-deshittification.stylus

/* ==UserStyle==
@name           youtube.com - 01/12/2022 12:45:43
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Mitigates Youtube Enshittification, and provides a better video list UI (👋 Google, 🤙 if you want tips about what a normal user actually wants…)
@author         7ute
==/UserStyle== */

@-moz-document domain("youtube.com") {
    #contents.ytd-rich-grid-renderer {
        margin: 10px;
        --ytd-rich-grid-items-per-row: 6 !important;
    }
    #contents ytd-rich-item-renderer {
        margin-bottom: 1rem;
    }
    #contents ytd-rich-item-renderer #avatar-link yt-img-shadow {
        height: 2.6rem;
        width: 2.6rem;
    }
    #contents ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
        font-size: 1rem;
        line-height: 1.3;
    }
    @media (max-width: 1024px) {
        #contents.ytd-rich-grid-renderer {
            margin: 10px;
            --ytd-rich-grid-items-per-row: 4 !important;
        }
        #contents ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
            font-size: 1.25rem;
        }
    }
    @media (max-width: 768px) {
        #contents.ytd-rich-grid-renderer {
            margin: 10px;
            --ytd-rich-grid-items-per-row: 3 !important;
        }
        #contents ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
            font-size: 1.25rem;
        }
    }
    @media (max-width: 480px) {
        #contents.ytd-rich-grid-renderer {
            margin: 10px;
            --ytd-rich-grid-items-per-row: 2 !important;
        }
        #contents ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
            font-size: 1.5rem;
        }
    }
    #contents > ytd-rich-grid-row,
    #contents > ytd-rich-grid-row > #contents {
        display: contents;
    }
    #contents > ytd-rich-section-renderer {
        display: none !important;
    }
}