.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;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.wh-responsive-grid.wh-grid-cols-2,
.wh-responsive-grid[data-grid-cols="2"] {
  --wh-grid-cols: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wh-responsive-grid.wh-grid-cols-3,
.wh-responsive-grid[data-grid-cols="3"] {
  --wh-grid-cols: 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wh-responsive-grid.wh-grid-cols-4,
.wh-responsive-grid[data-grid-cols="4"] {
  --wh-grid-cols: 4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wh-responsive-grid.wh-grid-cols-5,
.wh-responsive-grid[data-grid-cols="5"] {
  --wh-grid-cols: 5;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wh-responsive-grid.wh-grid-cols-6,
.wh-responsive-grid[data-grid-cols="6"] {
  --wh-grid-cols: 6;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.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-cell img,
.wh-grid-cell svg {
  max-width: 100%;
  height: auto;
}

.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 (min-width: 577px) and (max-width: 991px) {
  .wh-responsive-grid.wh-grid-cols-3,
  .wh-responsive-grid.wh-grid-cols-4,
  .wh-responsive-grid.wh-grid-cols-5,
  .wh-responsive-grid.wh-grid-cols-6,
  .wh-responsive-grid[data-grid-cols="3"],
  .wh-responsive-grid[data-grid-cols="4"],
  .wh-responsive-grid[data-grid-cols="5"],
  .wh-responsive-grid[data-grid-cols="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .wh-responsive-grid,
  .wh-responsive-grid.wh-grid-cols-1,
  .wh-responsive-grid.wh-grid-cols-2,
  .wh-responsive-grid.wh-grid-cols-3,
  .wh-responsive-grid.wh-grid-cols-4,
  .wh-responsive-grid.wh-grid-cols-5,
  .wh-responsive-grid.wh-grid-cols-6,
  .wh-responsive-grid[data-grid-cols] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
}