Feedly: Optimized cards layout for wide screen by chrl_

/* ==UserStyle==
@name         Feedly: Optimized cards layout for wide screen
@version      20230126.08.34
@namespace    userstyles.world/user/chrl_
@description  This style override provide a responsive full width view with as many columns as possible for the cards layout. Rather than the three columns existing layout. This is ideal for wide screen.
@author       chrl_
@license      No License
==/UserStyle== */
@-moz-document url-prefix("https://feedly.com/") {
    .TopHeaderBar {
        display: none;
    }

    .fx .container {
        max-width: 100% !important;
    }

    #headerBarFX .header {
        max-width: 100%;
        margin: 0 24px;
    }

    #headerBarFX h2 {
        padding-left: 0;
    }

    #headerBarFX .right-col {
        padding-right: 0;
    }

    .StreamPage.presentation-cards {
        --card_insetGap: 1em;

        display: grid;
        grid-gap: calc(var(--card_insetGap) * 2) calc(var(--card_insetGap) / 2);
        width: calc(100% + 2 * var(--card_insetGap));
        height: calc(100% + 2 * var(--card_insetGap));
        transform: translate(calc(-1 * var(--card_insetGap)), calc(-1 * var(--card_insetGap)));
    }

    .StreamPage.presentation-cards > :first-child,
    .StreamPage.presentation-cards > h2,
    .StreamPage.presentation-cards > :not(h2) + div {
        margin: 0 12px;
    }

    .StreamPage.presentation-cards > :not(h2) + div:last-child {
        justify-content: center;
    }

    .StreamPage.presentation-cards > h2 + div {
        display: grid;
        grid-gap: calc(var(--card_insetGap) * 2) calc(var(--card_insetGap) / 2);
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .SelectedEntryScroller {
        height: 100%;
    }

    .entry.cards {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .CardLayout {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        border: 0 none;
    }

    .CardLayout--selected,
    .CardLayout:hover,
    .CardLayout:focus-within {
        box-shadow: 0 0 1px var(--semanticColorBackgroundBold), 0 0 20px var(--semanticColorBackgroundMedium);
        background: linear-gradient(to bottom, var(--semanticColorBackgroundLight), var(--semanticColorBackground));
    }

    .CardLayout--title-focused {
        outline: 1px solid var(--semanticColorContentAccent);
    }

    .CardLayout__title .EntryTitleLink::before {
        content: "";
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .EntryMetadataSource {
        position: relative;
        z-index: 1;
    }
}