:where(.fizz-grid) {
  --grid-col-min: 135px;
  --grid-col-max: 135px;
  --gap: #{$gutter-medium};
  --align-items: normal;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-min), 1fr));
  gap: var(--gap);
  align-items: var(--align-items);
}

.fizz-grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min), 1fr));
}

@media (min-width: $breakpoint-m) {
  :where(.fizz-grid) {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-max), 1fr));;  
  }
}

.fizz-grid-equal-columns {
  --grid-columns: 3;
  --grid-col-min: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0,1fr));
  align-items: center;
  justify-items: start;
  gap: $gutter-medium;
}

.fizz-grid-equal-columns > * + :not(last-child) {
  justify-self: center;
}

.fizz-grid-equal-columns > :last-child {
  justify-self: right;
}

.fizz-grid-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  min-height: 1.5rem;
}
.fizz-grid-trio [data-grid-area="left"] {
  grid-column: 1;
  justify-self: start;
}
.fizz-grid-trio [data-grid-area="center"] {
  grid-column: 2;
  justify-self: center;
}
.fizz-grid-trio [data-grid-area="right"] {
  grid-column: 3;
  justify-self: right;
}
.fizz-grid-center {
  display: grid;
  place-items: center;
}