.cols {
  display: grid;
  --repeat: min(3, var(--cols));
  grid-template-columns: var(--cols-ratio, repeat(var(--repeat), 1fr));
  align-items: flex-start;
  gap: 40px;
  margin: 40px 0;
}

.cols > * {
  min-width: 0;
  min-height: 0;
}

.cols > div > :first-child {
  margin-top: 0 !important;
}

.cols > div > :last-child {
  margin-bottom: 0 !important;
}

.cols--split {
  position: relative;
}

.cols--split > div:first-child {
  position: relative;
}

.cols--split > div:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -50px; /* adjust based on your gap */
  width: 0px;
  height: 100%;
  background-color: transparent;
}

.cols--split {
  gap: 150px; /* or whatever spacing you prefer */
}

@media (max-width: 750px) {
  .cols,
  .cols--split {
    grid-template-columns: repeat(2, 1fr); /* ignore custom ratio */
  }
}
@media (max-width: 500px) {
  .cols,
  .cols--split {
    grid-template-columns: 1fr; /* single column layout */
  }
}

/*# sourceMappingURL=cols.css.map */