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

.grid-no-gap {
    gap: 0;
}

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

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

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

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

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

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

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

.grid-h-center {
   align-items: center;
}

@media (max-width: 850px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .grid-mobile-reverse div:first-child {
        order: 2;
    }
    .grid-tabled-full {
        grid-template-columns: 1fr;
    }
}