.eventLayout{
    display: grid;
    grid-template-columns: 18vw 18vw 18vw 18vw 18vw;
    grid-gap: 2vw;
    align-content: center;
}

.eventList{
    grid-column: 1 / 6; 
    grid-row: 2 / 3;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    justify-content: center;
}

.card {
  justify-self:center;
  border-radius: 2px;
  height: 250px;
  position: relative;
  width: 250px;
  
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  padding: 5px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  cursor:pointer;
}

.addEvent{
  background: rgb(103, 58, 183);
}

.cardTitle{
    font-size: 20px;
    grid-column: 1 / 3;
    align-self: center;
    justify-self: center;
}

.cardSport{
    font-size: 14px;
    grid-column: 1 / 3;
    align-self: center;
}

.cardDate{
    font-size: 14px;
    grid-column: 1 / 3;
    align-self: center;
}

.cardLocation{
    font-size: 14px;
    grid-column: 1 / 3;
    align-self: center;
}

.cardSlots{
    font-size: 14px;
    grid-column: 1 / 3;
    align-self: center;
}

.moreBoxLayout{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    margin: 5px;
}

.moreTitle{
    grid-column: 1 / 3;
}

.moreLocation{
    grid-column: 1 / 3;
}

.moreDate{
    grid-column: 1 / 3;
}

.moreDescription{
    grid-column: 1 / 3;
}

.moreHost{
    grid-column: 1 / 3;
}

.moreSlots{
    grid-column: 1 / 3;
}

.moreGender{
    grid-column: 1 / 3;
}

.moreSports{
    grid-column: 1 / 3;
}

.morePlayers{
    grid-column: 1 / 3;
}

.moreLevel{
    grid-column: 1 / 3;
}

.moreClose{
    grid-column: 1 / 2;
}

.moreJoin{
    grid-column: 2 / 3;
}