Div превышает максимальную высоту на мобильных устройствах

Question

Здравствуйте, у меня проблема с разметкой сетки на мобильных устройствах, в основном он превышает максимальную высоту, я не знаю, как решить эту проблему:

код:

 <Container>
      <Wrapper />
      <div style={{ background: "red", height: "500px", width: "100%" }}>a</div>
      <TestingLive>
        <div class="a">
          <span>a</span>
        </div>
        <div class="b">
          <span>b</span>
        </div>
        <div class="c">
          <span>c</span>
        </div>
        <div class="d">
          <span>d</span>
        </div>
        <div class="e">
          <span>e</span>
        </div>
      </TestingLive>
      <div style={{ background: "red", height: "500px", width: "100%" }}>a</div>
    </Container>

css:

const TestingLive = styled.div`
  display: grid;
  grid-template-areas:
    "a b c"
    "a d e";
  grid-gap: 4px;
  grid-template-columns: 40vw 1fr 1fr;
  height: 100%;
  max-height: 60vh;
  min-height: 60vh;
  margin-bottom: 10px;
  ${media.lessThan("medium")`
  grid-template-columns:1fr;
  grid-auto-rows: 200px;
  grid-template-areas:
  'a '
  'b'
  'c'
  'd'
  'e';
  `}

  margin-top: 50px;
  & > * {
    background-color: #333;
    color: white;
    position: relative;
  }

  & .a {
    grid-area: a;
  }

  & .b {
    grid-area: b;
  }

  & .c {
    grid-area: c;
  }

  & .d {
    grid-area: d;
  }

  & .e {
    grid-area: e;
  }
`;
const Container = styled.div`
  background: none;
  height: 100%;
  margin: 0 auto;
  max-width: 80rem !important;
  padding-right: 10px;
  padding-left: 10px;
`;
const Wrapper = styled.div`
  position: relative;
  width: 100%;
  padding-top: 128px;
  padding-bottom: 128px;
  box-sizing: border-box;
`;

В основном мне нужно, чтобы мои мобильные карты были в столбце со всей шириной 100% и высотой 25%, но это превышает максимальная высота моего контейнера

пример:

https://codesandbox.io/s/great-snowflake-4dwpy