Microsoft IE11 Flexbox Monkey Patch

microsoft_ie11_flexbox.css

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  /*ms*/
  .flex__item:nth-child(2) { flex-basis: 88% }
}
@supports (display: grid) {
    .l-productthumb>section {
        display: grid;
	justify-content: center;
        grid-template-columns: repeat(auto-fill, 242px);
    }
}
/*
                     .-"""-.
                   _/-=-.   \
                  (_|a a/   |_
                   / "  \   ,_)
              _    \`=' /__/
             / \_  .;--'  `-.
             \___)//      ,  \
              \ \/;        \  \
               \_.|         | |
                .-\ '     _/_/
              .'  _;.    (_  \
             /  .'   `\   \\_/
            |_ /       |  |\\
           /  _)       /  / ||
          /  /       _/  /  //
          \_/       ( `-/  ||
                    /  /   \\ .-.
                    \_/     \'-'/
                             `"`

*/

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  /*ms*/
    .l-hotel-card {
        flex-basis: 52%;
    }
    .l-hotel-card > SECTION {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
}

I am adding some CSS Grid behind a supports query. This is intended to resolve the "White space on the right" issue on all browsers except IE 11.