.color-page-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}



@media(max-width:1299px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }
}

@media(max-width:1024px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

@media(max-width:992px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

@media(max-width:768px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 0.5rem;
    }
}

@media(max-width:600px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        margin: 0 auto;
    }
    .color-page-main .color-dot {
        width: 20px;
        height: 20px;
    }
}

@media(max-width:480px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr 1fr !important;
    }
}

@media(max-width:440px) and (min-width:400px){
    .color-page-grid {
        gap: 0.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr !important;
    }
    .color-page-main .palette-code {
        font-size: 1rem;
        padding: 3px 40px !important;
    }
    /* Removed global navbar/search overrides from here */
}


@media(max-width:350px){
    .color-page-main .palette-code {
        padding: 3px 25px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr 1fr !important;
    }
    .color-page-main .palette-info{
        justify-content: space-around !important;
    }
}

@media(max-width:320px){
    .color-page-main .palette-code {
        padding: 3px 10px !important;
    }
    .color-page-grid{
        display: grid;
        grid-template-columns: 1fr !important;
    }
}