.color__content {
    grid-template-rows: 1fr auto 1fr;
}

.color__wrapper {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, clamp(100px, 50px + 15vw, 150px));
    gap: .375rem;
    grid-column: 1 / -1;
    grid-row: 2;
}

@media (min-width: 768px) {
    .color__content {
        max-width: 768px;
    }

    .color__wrapper {
        grid-template-columns: repeat(auto-fill, 250px);
    }
}

@media (min-width: 1024px) {
    .color__content {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .color__content {
        max-width: 1280px;
    }

    .color__wrapper {
        grid-template-columns: repeat(auto-fill, 280px);
    }
}