.grid {
  --content-max-width: 120ch;
  --content-wider-width: 2rem;
  --content-wide-width: 7rem;
  --grid-gap: clamp(1rem, 6vw, 3rem);
  --space: calc(var(--grid-gap) / 2);
  --standard: min(var(--content-max-width), 100% - var(--grid-gap) * 2);
  --wider: minmax(0, var(--content-wider-width));
  --wide: minmax(0, var(--content-wide-width));
  --full: minmax(var(--grid-gap), 1fr);
  display: grid;
  grid-template-columns: [full-start] var(--full) [wide-start] var(--wide) [wider-start] var(--wider) [standard-start] var(--standard) [standard-end] var(--wider) [wider-end] var(--wide) [wide-end] var(--full) [full-end]
}

.grid>* {
  grid-column: standard
}

.grid .wide {
  grid-column: wide
}

.grid .wider {
  grid-column: wider
}

.grid .full {
  grid-column: full
}

.c-two-columns {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  row-gap: var(--space-xl)
}

.c-two-columns>* {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 20rem
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-s);
  width: 100%
}

.grid-two-columns .column img {
  width: 100%
}

.hol-wrapping-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
  gap: var(--space-s);
  justify-content: center;
  align-items: center;
  padding: var(--space-xs);
  width: 100%;
}