Разработка на Grid для IE 11

Возникла проблема при проверке сайта на кроссбраузерность: блоки для layout были размещены при помощи grid, во всех браузерах работает корректно, кроме нашего с вами любимого IE (обязательно нужно сделать адаптацию под IE11). Много времени уделил на решение этого вопроса, но так и не достиг ожидаемого результата. Префиксы не особо помогли, но проблема свелась к тому что блоки теперь отображаются один поверх другого на первой ячейке. Вот реализация: https://codepen.io/Tony2Night/pen/VVYVoZ

HTML

<section class="start">
    <div class="start__manager">
        <a href="#" class="manager">
            <div class="start__info">
                <p>are you</p>
                <p>
          <strong>manager?</strong>           
        </p>
            </div>
        </a>
    </div>  
    <div class="start__programmer">
        <a href="#" class="programmer">
            <div class="start__info">
                <p>are you</p>
                <p>
          <strong>programmer?</strong>
        </p>
            </div>
        </a>
    </div>
</section>

CSS

.start {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;  
    -ms-grid-rows: 1fr;
    width: 100%;
    height: 100vh; }
    .start__manager, .start__programmer {
        display: flex;
        align-items: center;
        justify-content: center; }
    .start__manager {
        background-color: yellow; }
    .start__programmer {
        background-color: green; }