.wh-responsive-grid {
  display: grid;
  gap: var(--wh-grid-gap, 24px);
  grid-template-columns: repeat(var(--wh-grid-cols, 2), minmax(0, 1fr));
  margin: 1rem 0;
  max-width: 100%;
  box-sizing: border-box;
}

.wh-responsive-grid.wh-grid-cols-1,
.wh-responsive-grid[data-grid-cols="1"] {
  --wh-grid-cols: 1;
}

.wh-responsive-grid.wh-grid-cols-2,
.wh-responsive-grid[data-grid-cols="2"] {
  --wh-grid-cols: 2;
}

.wh-responsive-grid.wh-grid-cols-3,
.wh-responsive-grid[data-grid-cols="3"] {
  --wh-grid-cols: 3;
}

.wh-responsive-grid.wh-grid-cols-4,
.wh-responsive-grid[data-grid-cols="4"] {
  --wh-grid-cols: 4;
}

.wh-responsive-grid.wh-grid-cols-5,
.wh-responsive-grid[data-grid-cols="5"] {
  --wh-grid-cols: 5;
}

.wh-responsive-grid.wh-grid-cols-6,
.wh-responsive-grid[data-grid-cols="6"] {
  --wh-grid-cols: 6;
}

.wh-grid-cell {
  min-width: 0;
  padding: var(--wh-grid-cell-padding, 0);
  border-color: var(--wh-grid-border-color, transparent);
  border-style: var(--wh-grid-border-style, none);
  border-width: var(--wh-grid-border-width, 0);
  box-sizing: border-box;
}

.wh-grid-border-none > .wh-grid-cell {
  border-style: none;
  border-width: 0;
}

.wh-grid-align-stretch {
  width: 100%;
}

.wh-grid-align-left {
  margin-left: 0;
  margin-right: auto;
}

.wh-grid-align-center {
  margin-left: auto;
  margin-right: auto;
}

.wh-grid-align-right {
  margin-left: auto;
  margin-right: 0;
}

.wh-grid-cell > :first-child {
  margin-top: 0;
}

.wh-grid-cell > :last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .wh-responsive-grid {
    grid-template-columns: 1fr;
  }
}