/* Flexbox */
.align-items-center {
    align-items: center;
}

.align-content-center {
    align-content: center;
}

.justify-items-center {
    justify-items: center;
}

.justify-content-center {
    justify-content: center;
}

/* Flex grids */
.flex-row-column-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-spacing);
}

.flex-3-column>* {
    flex: 0 0 calc((100% - (2 * var(--gap-spacing)))/3);
}

.flex-4-column>* {
    flex: 0 0 calc((100% - (3 * var(--gap-spacing)))/4);
}

/* Grid */
/* Grid column sizes */
.grid-row-column-wrap {
    display: grid;
    gap: var(--gap-spacing);
}

.grid-40-60 {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
}

.grid-50-50 {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
}

.grid-60-40 {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
}

.grid-2-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

@media (width <=767px) {
    .grid-row-column-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (767px < width <=1024px) {
    .grid-4-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}