objects.grid.css

.o-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  @supports (display: grid) {
    display: grid;
    grid-column-gap: var(--space-default);
    grid-row-gap: var(--space-default);
  }
}

.o-grid--halves {
  @media (--breakpoint-10) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.o-grid--halves > .o-grid__item {
  @media (--breakpoint-10) {
    flex-basis: calc(calc(100% / 2) - var(--space-default));
  }
}

.o-grid--thirds {
  @media (--breakpoint-10) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.o-grid--thirds > .o-grid__item {
  @media (--breakpoint-10) {
    flex-basis: calc(calc(100% / 3) - var(--space-default));
  }
}

.o-grid__item {
  @supports (display: grid) {
    flex: 1;
  }
}