:root{
    --light-green: #e4ea6c;
    --dark-grey: #313844;
    --dark-green: #0d5d78;
    --light-blue: #aad5e1;
    --light-grey: #dbdbdd;
    --burgundy: #7A003B;
}

*{
    box-sizing: border-box;
}

hr{
  display:none;
}

.swiper {
    width: 100%;
    height: 100%;
}

.main-content-wrap{
  padding: 0px !important;
}

.main-content{
  line-height: 1.4;
  max-width: 2300px;
  margin:auto;
}

.swiper-wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  column-gap:16px;
  row-gap:20px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  flex-direction:column;
  border-radius:2rem;
  color: #000;
  padding-bottom: 4px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  object-fit:contain;
  border-radius: 0.5rem;
  align-self: baseline;
}

h3{
    font-size: 25px;
    font-weight:600;
}

.event-details{
    text-align:left;
    margin-top:10px;
}

.main-content h3{
  margin-top:0px;
}

.event-register-cell{
  justify-content: flex-end;
  align-self: end;
  margin-top:auto;
}

.register-button, button{
  transition:0.3s;
  align-items:center;
  color:#313844;
  border-radius: 2rem;
  padding: .5rem 1rem;
  margin-top:0px;
  border: 1px solid #313844;
}

.register-button:hover{
  transition: 0.3s;
  background-color: #000;
  color: #fff;
  align-items:center;
  text-decoration: none;
}


@media screen and (min-width:584px) and (max-width: 655px){
  .swiper-slide{
    display:grid !important;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 16px;
    grid-auto-columns: 1fr;
  }

  .event-banner{
    grid-column: 1;
    grid-row: 1;
    align-self: flex-start;
  }

  .swiper-slide img{
    align-content:flex-start;
    align-self:flex-start;
  }
  .event-details{
    grid-column:2;
    grid-row:1;
    display:flex;
    flex-direction: column;
    align-self: start;
    }

  .event-register-cell{
    grid-column: 2;
    grid-row: 1;
    text-align:right;
  }
}