.grid {
  --content-max-width: 60rem;
  --content-wider-2-width: 7rem;
  --content-wide-1-width: 2rem;

  --grid-gap: clamp(1rem, 6vw, 3rem);

  --standard: min(var(--content-max-width), 100% - var(--grid-gap) * 2);
  --wide-1: minmax(0, var(--content-wide-1-width));
  --wide-2: minmax(0, var(--content-wider-2-width));
  --full: minmax(var(--grid-gap), 1fr);

  display: grid;
  grid-template-columns:
    [full-start] var(--full) [wide-2-start] var(--wide-2) [wide-1-start] var(--wide-1) [standard-start] var(--standard) [standard-end] var(--wide-1) [wide-1-end] var(--wide-2) [wide-2-end] var(--full) [full-end];
}

.grid>* {
  grid-column: standard;
}

.grid .wide-1 {
  grid-column: wide-1;
}

.grid .wide-2 {
  grid-column: wide-2;
}

.grid .full {
  grid-column: full;
}

.hol-wrapping-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27ch, 1fr));
  gap: var(--space-m);
  justify-content: center;
  justify-items: center;
  align-items: start;
  padding: 0;
  width: 100%;
  direction: ltr;
}

.hol-scrolling-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40ch, auto);
  gap: var(--space-xs);
  justify-content: start;
  align-items: center;
  padding: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.hol-column {
  display: grid;
  grid-template-columns: minmax(auto, 1fr);
  gap: var(--space-xs);
  justify-items: center;
  width: 100%;
  padding: 0;
}

.hol-scrolling-column {
  display: grid;
  grid-template-columns: minmax(auto, 1fr);
  gap: var(--space-xs);
  justify-content: center;
  align-items: start;
  padding: 0;
  width: 100%;
  max-height: 20vh;
  overflow-y: auto;
  scrollbar-width: thin;
}