.os-card-grid {
  --os-card-grid-columns: repeat(auto-fit, minmax(min(100%, var(--os-card-grid-min-width, 32rem)), 1fr));
  --os-card-grid-gap: var(--space-m);
  display: block;
  width: 100%;
  min-width: 0;
  margin-block: 0 !important;
}

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

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

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

.os-card-grid--min-24 { --os-card-grid-min-width: 24rem; }
.os-card-grid--min-28 { --os-card-grid-min-width: 28rem; }
.os-card-grid--min-32 { --os-card-grid-min-width: 32rem; }
.os-card-grid--min-36 { --os-card-grid-min-width: 36rem; }

.os-card-grid--gap-s { --os-card-grid-gap: var(--space-s); }
.os-card-grid--gap-m { --os-card-grid-gap: var(--space-m); }
.os-card-grid--gap-l { --os-card-grid-gap: var(--space-l); }

.os-card-grid > .acf-innerblocks-container {
  display: grid;
  grid-template-columns: var(--os-card-grid-columns);
  gap: var(--os-card-grid-gap);
  min-width: 0;
}

.os-card-grid > .acf-innerblocks-container > * {
  min-width: 0;
  height: 100%;
  margin: 0 !important;
}

.os-card-grid--animate > .acf-innerblocks-container > * {
  --animate-range-start: entry 300px;
  --animate-range-end: entry 500px;
}

@media (max-width: 1023px) {
  .os-card-grid--columns-3,
  .os-card-grid--columns-4 {
    --os-card-grid-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .os-card-grid--columns-2,
  .os-card-grid--columns-3,
  .os-card-grid--columns-4 {
    --os-card-grid-columns: minmax(0, 1fr);
  }
}

.editor-styles-wrapper .os-card-grid {
  min-width: 0;
}