.flex-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

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

.flex-grid.gap-30 {
    gap: 30px;
}

.flex-grid > * {
    flex-basis: 100%;
}

.flex-grid.flex-grid--flexible > * {
    flex: 1 1 100%;
}

@media all and (min-width: 840px) {
    .flex-grid.lg-flex-grid--1of4,
    .flex-grid.lg-flex-grid--1of3,
    .flex-grid.md-flex-grid--1of2 > * {
        flex: 0 0 50%;
    }

    .flex-grid.gap-20.lg-flex-grid--1of4,
    .flex-grid.gap-20.lg-flex-grid--1of3,
    .flex-grid.gap-20.md-flex-grid--1of2 > * {
        flex: 0 0 calc(50% - 10px);
    }

    /*.flex-grid.flex-grid--flexible.lg-flex-grid--1of4,
    .flex-grid.flex-grid--flexible.md-flex-grid--1of2 > * {
        flex: 1 1 50%;
    }*/
}

@media all and (min-width: 980px) {
    .flex-grid.lg-flex-grid--1of4 > * {
        flex: 0 0 25%;
    }

    .flex-grid.flex-grid--flexible.lg-flex-grid--1of4 > * {
        flex: 1 1 25%;
    }

    .flex-grid.lg-flex-grid--1of3 > * {
        flex: 0 0 33%;
    }

    .flex-grid.flex-grid--flexible.lg-flex-grid--1of3 > * {
        flex: 1 1 33%;
    }

    .flex-grid.lg-flex-grid--1of2 > * {
        flex: 0 0 50%;
    }
    
    .flex-grid.flex-grid--flexible.lg-flex-grid--1of2 > * {
        flex: 1 1 50%;
    }
}

.grid {
    display: grid;
}

.grid > * {
    height: 100%;
}

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

.grid.gap-30 {
    gap: 30px;
}

@media all and (min-width: 840px) {
    .grid.columns-2,
    .grid.columns-3,
    .grid-columns-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media all and (min-width: 980px) {
    .grid.columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

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