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

@import (reference) 'common/screen-sizes.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 26rem;
        grid-template-rows: fit-content(13rem) 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.7rem;
            overflow-y: auto;

            .picker {
                flex-basis: 17rem;
                height: 3rem;
                margin: 0.7rem;
            }
        }

        .meta-items-container {
            grid-area: meta-items-area;
            display: grid;
            grid-auto-rows: max-content;
            grid-gap: 1.4rem;
            align-items: center;
            padding: 0 1.4rem;
            overflow-y: auto;

            .meta-item {
                &:hover, &:focus, &:global(.active) {
                    outline-offset: calc(-1 * var(--focus-outline-size));
                }
            }
        }

        .meta-preview-container {
            grid-area: meta-preview-area;
        }
    }
}

@media only screen and (min-width: @xxlarge) {
    .discover-container {
        .discover-content {
            .meta-items-container {
                grid-template-columns: repeat(8, auto);
            }
        }
    }
}

@media only screen and (max-width: @xxlarge) {
    .discover-container {
        .discover-content {
            .meta-items-container {
                grid-template-columns: repeat(7, auto);
            }
        }
    }
}

@media only screen and (max-width: @normal) {
    .discover-container {
        .discover-content {
            .meta-items-container {
                grid-template-columns: repeat(6, auto);
            }
        }
    }
}

@media only screen and (max-width: @medium) {
    .discover-container {
        .discover-content {
            .meta-items-container {
                grid-template-columns: repeat(5, auto);
            }
        }
    }
}

@media only screen and (max-width: @small) {
    .discover-container {
        .discover-content {
            .meta-items-container {
                grid-template-columns: repeat(4, auto);
            }
        }
    }
}

@media only screen and (max-width: @xsmall) {
    .discover-container {
        .discover-content {
            grid-template-columns: 1fr;
            grid-template-rows: fit-content(19rem) 1fr;
            grid-template-areas:
                "pickers-area"
                "meta-items-area";

            .meta-items-container {
                grid-template-columns: repeat(5, auto);
            }

            .meta-preview-container {
                display: none;
            }
        }
    }
}