.columns > li {
  break-inside: avoid;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
}
.grid > li {
  margin: 0 !important;
  padding: 0 !important;
}

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

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

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

@media all and (min-width: 30rem) {
  .mini-2.columns {
    columns: 2;
  }
  .mini-2.grid {
    grid-template-columns: 1fr 1fr;
  }
  .mini-3.columns {
    columns: 3;
  }
  .mini-3.grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mini-4.columns {
    columns: 4;
  }
  .mini-4.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media all and (min-width: 40rem) {
  .small-2.columns {
    columns: 2;
  }
  .small-2.grid {
    grid-template-columns: 1fr 1fr;
  }
  .small-3.columns {
    columns: 3;
  }
  .small-3.grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .small-4.columns {
    columns: 4;
  }
  .small-4.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media all and (min-width: 50rem) {
  .medium-2.columns {
    columns: 2;
  }
  .medium-2.grid {
    grid-template-columns: 1fr 1fr;
  }
  .medium-3.columns {
    columns: 3;
  }
  .medium-3.grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .medium-4.columns {
    columns: 4;
  }
  .medium-4.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media all and (min-width: 60rem) {
  .large-2.columns {
    columns: 2;
  }
  .large-2.grid {
    grid-template-columns: 1fr 1fr;
  }
  .large-3.columns {
    columns: 3;
  }
  .large-3.grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .large-4.columns {
    columns: 4;
  }
  .large-4.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}