grid-fallback.css

/*
 * Grids
 */

.grid {
  /* Fallback: create equal heights of items for non grid browsers like Edge */
  @supports not (display: grid) {
    display: flex;
    flex-flow: row wrap;
  }
}

@media all and (-ms-high-contrast: none) {
  .grid {
    display: flex;
    flex-flow: row wrap;
  } /* IE10 */

  *::-ms-backdrop,
  .grid {
    display: flex;
    flex-flow: row wrap;
  } /* IE11 */
}


.grid-3-1 {
  @media (--breakpoint-medium) {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-column-gap: 3rem;

        /* Fallback */
    & > .grid-item {
      margin-right: 2rem;
      margin-left: 0;
      width: calc(75% - 2rem);
    }

    & > .grid-item:nth-child(2) {
      width: calc(25% - 1rem);
    }
    /* End fallback */

  }
}

.grid-halves {
  @media (--breakpoint-small-medium) {
    display: grid;
    grid-template-columns: 1fr 1fr;

   /* Fallback */
    & > .grid-item {
      width: 50%;
    }
    /* End fallback */

  }
}


.grid-item {
  position: relative;

  /* Fallback */
  float: left;
  width: 100%;

  @supports (display: grid) {
    width: auto !important;
    margin-right: 0 !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  &:last-child {
    margin-right: 0;
  }
  /* End fallback */
}