Некоторые из сеток css не вписываются в линии

Привет, моя css-сетка не работает.. красная секция помещается в первый квадрат, но остальные, кажется, просто не вписываются в сетку.. Я совершенно новичок в этом, что мне не хватает?? Я пробовал все, но не могу найти простого решения, я уверен.

<section class = "pastevnts">
      <div class = "pastevents__container">
        <div class = "pastevents__title">
          PAST EVENTS
        </div>
        <div class = "pastevents__event">
          <div class = "pastevents__event-date">
            17<span>Feb</span><br>2019
          </div>
          <div class = "pastevents__event-title">
            ELECTRIC LOVE PARADE
          </div>
          <div class = "pastevents__event-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam purus in fringilla semper. In laoreet, urna ut porttitor cursus, lectus dolor ultrices ligula, sit amet tincidunt massa sem eget dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula dolor 
          </div>
        </div>
      </div>
    </section>


//pastevents
.pastevents {
  min-height: 100vh;
  background-color: #000;

  &__event {
    height: 200px;
    width: 500px;
    position: relative;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 20% 80%;
  }

  &__event-date {
    background-color: red;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }

  &__event-title {
    background-color: blue;
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
  }

  &__event-body {
    background-color: green;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
  }
}