.main-view-render {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);

    h3 {
        margin: 0;
    }

    >h3 {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .recently-added {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title see"
            "list  list";
        align-content: start;
        gap: .75rem;

        h3 {
            grid-area: title;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
        }
    }

    .see-button {
        grid-area: see;
        align-self: center;
        flex-grow: 0;
        padding: .25rem .5rem;
        background-color: transparent;
        border: 0;
        border-radius: .5rem;
        font: inherit;
        font-size: .75rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;

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

        &:focus-visible {
            outline: 2px solid var(--terciary);
            outline-offset: -2px;
        }
    }

    /* random section stays collapsed until a random pick is shown */
    .randomSection:not(:has(.randomResult > *)) {
        display: none;
    }

    .randomResult {
        opacity: 0;
        transform: translateY(.5rem);
        transition: opacity .25s ease, transform .25s ease;
    }

    .randomResult.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

.media-carrousel {
    width: 100%;
    grid-area: list;

    .media-list {
        display: flex;
        flex-direction: row;
        gap: calc(var(--spacing) * .75);
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .media-card {
        flex-shrink: 0;
        width: 82%;
        scroll-snap-align: start;
    }

}


.gridButtonContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: calc(var(--spacing) * .75);

    .categoryButton {
        position: relative;
        overflow: hidden;
        min-height: 6.5rem;
        padding: .75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        background-color: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        cursor: pointer;
        transition: transform .15s ease, background-color .15s ease, border-color .15s ease;

        &:hover {
            transform: translateY(-2px);
            background-color: var(--surface-hover);
            border-color: var(--border-strong);
        }

        &:focus-visible {
            outline: 2px solid var(--terciary);
            outline-offset: 2px;
        }

        p {
            margin: 0;
            color: var(--text);
            font-size: .8rem;
            font-weight: 700;
        }
    }

    .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        width: 2.25rem;
        height: 2.25rem;
        margin: 0;
        color: var(--text);

        svg {
            width: 1.125rem;
            height: 1.125rem;
        }
    }

    .categoryButton[data-category='videogame']>.icon {
        background-color: #8338ec;
    }

    .categoryButton[data-category='album']>.icon {
        background-color: #3a86ff;
    }

    .categoryButton[data-category='book']>.icon {
        background-color: #ffbe0b;
    }

    .categoryButton[data-category='series']>.icon {
        background-color: #ad2831;
    }

    .categoryButton[data-category='movie']>.icon {
        background-color: #fb5607;
    }

    .categoryButton[data-category='podcast']>.icon {
        background-color: #06d6a0;
    }

    .categoryButton::after {
        content: '';
        position: absolute;
        top: 10px;
        right: -5px;
        width: 72px;
        height: 72px;
        background-color: rgba(255, 255, 255, 0.05);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .categoryButton[data-category='series']::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 8a2 2 0 0 0 0-4 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0 0 4'/%3E%3Cpath d='M10 22 9 8'/%3E%3Cpath d='m14 22 1-14'/%3E%3Cpath d='M20 8c.5 0 .9.4.8 1l-2.6 12c-.1.5-.7 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L3.2 9c-.1-.6.3-1 .8-1Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 8a2 2 0 0 0 0-4 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0 0 4'/%3E%3Cpath d='M10 22 9 8'/%3E%3Cpath d='m14 22 1-14'/%3E%3Cpath d='M20 8c.5 0 .9.4.8 1l-2.6 12c-.1.5-.7 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L3.2 9c-.1-.6.3-1 .8-1Z'/%3E%3C/svg%3E");
    }


    .categoryButton[data-category='videogame']::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='10' y1='11' y2='11'/%3E%3Cline x1='8' x2='8' y1='9' y2='13'/%3E%3Cline x1='15' x2='15.01' y1='12' y2='12'/%3E%3Cline x1='18' x2='18.01' y1='10' y2='10'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='10' y1='11' y2='11'/%3E%3Cline x1='8' x2='8' y1='9' y2='13'/%3E%3Cline x1='15' x2='15.01' y1='12' y2='12'/%3E%3Cline x1='18' x2='18.01' y1='10' y2='10'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
    }


    .categoryButton[data-category='album']::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z'/%3E%3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z'/%3E%3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5'/%3E%3C/svg%3E");
    }


    .categoryButton[data-category='book']::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v16'/%3E%3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v16'/%3E%3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z'/%3E%3C/svg%3E");
    }


    .categoryButton[data-category='movie']::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M7 3v18'/%3E%3Cpath d='M3 7.5h4'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 16.5h4'/%3E%3Cpath d='M17 3v18'/%3E%3Cpath d='M17 7.5h4'/%3E%3Cpath d='M17 16.5h4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M7 3v18'/%3E%3Cpath d='M3 7.5h4'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 16.5h4'/%3E%3Cpath d='M17 3v18'/%3E%3Cpath d='M17 7.5h4'/%3E%3Cpath d='M17 16.5h4'/%3E%3C/svg%3E");
    }


    .categoryButton[data-category='podcast']::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E");
    }
}

/* Desktop */
@media (min-width: 60rem) {
    .main-view-render {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas:
            "heading heading"
            "picker  recent"
            "result  recent";
        gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
        align-content: start;
        height: 100%;

        >h3 {
            grid-area: heading;
        }

        >.gridButtonContainer {
            grid-area: picker;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-content: start;
        }

        >.randomSection {
            grid-area: result;
            align-self: start;
            width: 100%;
        }

        >.recently-added {
            grid-area: recent;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--secondary-bg) transparent;

            &::-webkit-scrollbar {
                width: .625rem;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--secondary-bg);
                border: .1875rem solid var(--surface);
                border-radius: 999px;
            }

            .media-carrousel .media-list {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                overflow: visible;
            }

            .media-carrousel .media-card {
                width: 100%;
            }
        }
    }
}