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

*{
  box-sizing: border-box;
}

body{
  background-color:#313844;
}

hr{
  display:none;
}

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

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

.swiper-slide {
cursor:grab;
font-size: 18px;
display: flex;
flex-direction:column;
border-radius:1rem;
color: #000;
padding:10px;
background: var(--light-blue);

&:nth-child(3n-1) {
  background: var(--light-green) !important;
}
&:nth-child(3n-2) {
  background: var(--light-blue) !important;
}
&:nth-child(3n-3) {
  background: var(--light-grey) !important;
}
}

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

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

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

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

.swiper-button-next, .swiper-button-prev {
position: absolute;
border-radius:50%;
width: 40px;
height: 40px;
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color:  var(--light-blue);
background-color:var(--dark-grey);
}

.swiper-button-next:after, .swiper-button-prev:after {
font-size:20px;
}


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

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

.register-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;
}

hr{
  display:none;
}

@media screen and (min-width: 960px){
.swiper-slide{
  height:450px;
}
}


@media screen and (min-width: 450px) and (max-width: 659px){
.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: 1;
  grid-row: 2;
  justify-content: flex-end;
  display: flex;
  align-self: flex-end;
}
}