.grid {
    height: auto;
    width: 100%;
    display: grid;
    align-items: center;
    gap: 10px;
    overflow: visible;
}

.grid.g-10 {
    gap: 10px;
}

.grid.g-20 {
    gap: 20px;
}

.grid.cols-1 {
    grid-template-columns: 1fr;
}

.grid.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid.cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid.cols-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid.cols-9 {
    grid-template-columns: repeat(9, 1fr);
}

.grid.cols-10 {
    grid-template-columns: repeat(10, 1fr);
}

/*Responsive*/
@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
    .grid.cols-4, .grid.cols-5, .grid.cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid.cols-7, .grid.cols-8, .grid.cols-9, .grid.cols-10 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .grid.cols-4, .grid.cols-5, .grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid.cols-7, .grid.cols-8, .grid.cols-9, .grid.cols-10 {
        grid-template-columns: repeat(3, 1fr);
    }
}