stremio-web/src/routes/Discover/styles.less

.discover-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);

    .nav-bar {
        flex: none;
        align-self: stretch;
    }

    .discover-content {
        flex: 1;
        align-self: stretch;
        display: grid;
        grid-template-columns: 1fr 26em;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "pickers-area meta-preview-area"
            "meta-items-area meta-preview-area";

        .pickers-container {
            grid-area: pickers-area;
            display: flex;
            flex-direction: row;
            flex-flow: wrap;
            padding: 0.4em;

            .picker-button {
                width: 16em;
                height: 3em;
                margin: 0.4em;
                padding: 0 0.8em;
                display: flex;
                flex-direction: row;
                align-items: center;
                background-color: var(--color-backgroundlighter);
                cursor: pointer;

                &:hover {
                    background-color: var(--color-surfacedarker60);
                }

                &:global(.active) {
                    background-color: var(--color-surfacelight);

                    .picker-label {
                        color: var(--color-backgrounddarker);
                    }

                    .picker-icon {
                        fill: var(--color-backgrounddarker);
                    }
                }

                .picker-label {
                    flex: 1;
                    font-size: 1.1em;
                    line-height: 1.2em;
                    max-height: 2.4em;
                    color: var(--color-surfacelighter);

                    &.capitalized {
                        text-transform: capitalize;
                    }
                }

                .picker-icon {
                    flex: none;
                    width: 1em;
                    height: 1em;
                    margin-left: 0.8em;
                    fill: var(--color-surfacelighter);
                }
            }
        }

        .meta-items-container {
            grid-area: meta-items-area;
            padding: 0 0.4em;
            overflow-x: hidden;
            overflow-y: auto;

            .meta-item-container {
                display: inline-block;
                width: calc(100% / var(--items-per-row));
                padding: 0.4em;

                .meta-item {
                    width: 100%;
                }
            }
        }

        .meta-preview-container {
            grid-area: meta-preview-area;
            font-size: 1.2em;
        }
    }
}

.menu-container {
    --border-color: var(--color-backgroundlighter40);
    --box-shadow: -0.6em 0.6em 0.5em -0.1em var(--color-backgrounddark40);

    .menu-content {
        width: 16em;
        background-color: var(--color-backgroundlighter);

        .menu-item-container {
            padding: 0.8em;
            cursor: pointer;

            &:hover {
                background-color: var(--color-surfacedarker60);
            }

            .menu-label {
                line-height: 1.2em;
                max-height: 2.4em;
                color: var(--color-surfacelighter);

                &.capitalized {
                    text-transform: capitalize;
                }
            }
        }
    }
}

@media only screen and (max-width: 1000px) {
    .discover-container, .menu-container {
        font-size: 14px;
        --items-per-row: 5;

        .discover-content {
            grid-template-areas:
                "pickers-area pickers-area"
                "meta-items-area meta-items-area";
        }
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    .discover-container, .menu-container {
        font-size: 14px;
        --items-per-row: 4;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .discover-container, .menu-container {
        font-size: 16px;
        --items-per-row: 5;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .discover-container, .menu-container {
        font-size: 16px;
        --items-per-row: 6;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 2000px) {
    .discover-container, .menu-container {
        font-size: 18px;
        --items-per-row: 7;
    }
}

@media only screen and (min-width: 2000px) {
    .discover-container, .menu-container {
        font-size: 18px;
        --items-per-row: 8;
    }
}