.columns-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.columns-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.columns-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.columns-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}

.columns-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
}

.columns-2.alignmiddle {
    align-items: center;
}

@media (max-width:1100px) {

    .columns-3,
    .columns-4 {
        grid-template-columns: repeat(2, 1fr);

    }

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

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

@media (max-width:768px) {

    .columns-2,
    .columns-3,
    .columns-4 {
        grid-template-columns: 1fr;
    }

    .columns-5,
    .columns-6,
    .columns-7,
    .columns-8 {
        grid-template-columns: repeat(2, 1fr);
    }
}