.product-navigation{
    width: min(1200px, 100%);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    padding-block: var(--space-xxl);
    background: var(--color-bg);

    h1{
        font-size: var(--font-size-xxxl);
    }

    .product-navigation-categories {
        display: grid;
        gap: var(--space-md);
        grid-template-columns: repeat(2, 1fr);
        @media (min-width:1000px) {
            grid-template-columns: repeat(6, 1fr);
        }
        @media (min-width:800px) and (max-width:1000px) {
            grid-template-columns: repeat(5, 1fr);
        }
        @media (min-width:600px) and (max-width:800px) {
            grid-template-columns: repeat(4, 1fr);
        }
        @media (min-width:401px) and (max-width:600px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .product-navigation-categories-section{
        display:flex;
        flex-direction:column;
        gap:var(--space-sm);
        cursor:pointer;
        width:100%;
        min-width:0;

        img{
            width:100%;
            aspect-ratio: 1;
            height:auto;
            object-fit: cover;
            display:block;
            border-radius: var(--radius-lg);
            transition: scale 0.2s ease-in;
        }

        h2{
            font-size: var(--font-size-sm);
            font-weight: 500;
            text-align: center;
            margin: 0;
            padding: 0;
        }
    }

    @media (min-width: 900px) {
        .product-navigation-categories-section:hover img{
            scale: 1.03;
        }
    }
}

.category-products{
    width: min(1200px, 100%);
    margin-block: var(--space-lg);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    span{
        font-size: var(--font-size-xxl);
        font-weight: 500;
    }
}

.category-products-section{
        display: grid;
        gap: var(--space-lg);
        row-gap: var(--space-xl);
        grid-template-columns: 1fr;
        @media (min-width: 601px) and (max-width: 900px) {
            grid-template-columns: repeat(3, 1fr);
        }
        @media (min-width: 500px) and (max-width: 650px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 901px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

main{
    background: var(--color-bg-alt);
}