.w-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--w-grid-gap, 0px) * -1);
}

.w-grid > * {
    box-sizing: border-box;
    padding-bottom: var(--w-grid-gap, 0px);
    padding-left: var(--w-grid-gap, 0px);
}

.w-grid .w-box-size {
    width: calc(100% / var(--w-grid-s, 1));
}

@media (min-width: 640px) {
    .w-grid .w-box-size {
        width: calc(100% / var(--w-grid-m, var(--w-grid-s, 1)));
    }
}

@media (min-width: 968px) {
    .w-grid .w-box-size {
        width: calc(100% / var(--w-grid-l, var(--w-grid-m, var(--w-grid-s, 1))));
    }
}

@media (min-width: 1200px) {
    .w-grid .w-box-size {
        width: calc(100% / var(--w-grid-xl, var(--w-grid-l, var(--w-grid-m, var(--w-grid-s, 1)))));
    }
}