eventList.less

#event-list {
  .event-list-item {
    border-bottom: 1px solid #000;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 15vmin;

    .grid-container {
      width: 100%;
      padding: 2vmin;
      display: grid;
      grid-gap: 0;
      grid-template-columns: 55% 45%;
      grid-template-rows: 50% 50%;

      .title {
        margin: 0 0 1.5vmin;
        display: flex;
        font-weight: 100;
        font-size: 150%;
        color: #004398;
        grid-column: 1 / span 2;
        grid-row: 1;
      }

      .price {
        margin: 0;
        font-size: 100%;
        font-weight: 100;
        color: rgb(107, 108, 119);
        grid-column: 1;
        grid-row: 2;
      }

      .date-container {
        margin: 0;
        grid-column: 2;
        grid-row: 2;
      }

      .weekday {
        margin: 0;
        font-size: 100%;
        font-weight: 100;
        grid-column: 1;
        color: rgb(107, 108, 119);
      }

      .date {
        margin: 0;
        font-size: 75%;
        font-weight: 100;
        grid-column: 2;
        color: rgb(107, 108, 119);
      }
    }

    img {
      width: 15vmin;
      height: 15vmin;
    }

    .img-container {
      width: 15vmin;
      height: 15vmin;
      position: relative;
      object-fit: cover;
    }
  }

  .registration {
    background-color: #fff;
  }

  .upcoming {
    background-color: #ddd;
  }

  .past {
    background-color: #bbb;
  }
}