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

@media (min-width: 768px) {
    .grid {
        grid-column-gap:40px
    }
}

@media (min-width: 768px) {
    .grid--2-1x5 {
        grid-template-columns:minmax(0,1fr) minmax(0,5fr)
    }
}

@media (min-width: 768px) {
    .grid--2-2x5 {
        grid-template-columns:minmax(0,2fr) minmax(0,5fr)
    }
}

@media (min-width: 768px) {
    .grid--2-3x5 {
        grid-template-columns:minmax(0,3fr) minmax(0,5fr)
    }
}

@media (min-width: 768px) {
    .grid--2-4x5 {
        grid-template-columns:minmax(0,4fr) minmax(0,5fr)
    }
}

@media (min-width: 768px) {
    .grid--2-5x5 {
        grid-template-columns:minmax(0,5fr) minmax(0,5fr)
    }
}

@media (min-width: 768px) {
    .grid--2-5x1 {
        grid-template-columns:minmax(0,5fr) minmax(0,1fr)
    }
}

@media (min-width: 768px) {
    .grid--2-5x2 {
        grid-template-columns:minmax(0,5fr) minmax(0,2fr)
    }
}

@media (min-width: 768px) {
    .grid--2-5x3 {
        grid-template-columns:minmax(0,5fr) minmax(0,3fr)
    }
}

@media (min-width: 768px) {
    .grid--2-5x4 {
        grid-template-columns:minmax(0,5fr) minmax(0,4fr)
    }
}

@media (min-width: 768px) {
    .grid--3 {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)
    }
}