.eventsSection {
  margin: 60px 0 0;
  padding: 120px 0;
  background: #176A77;
  color: #FEFBF3;
}
.eventsSection h2 {
  font: 400 72px/83px Carrie;
  border-bottom: 2px solid #FEFBF3;
  padding: 0 0 16px;
}
.eventsSection .events {
  padding: 60px 0 0;
  display: grid;
  grid: auto/1fr 1fr 1fr;
  grid-gap: 16px;
}
.eventsSection .card {
  padding: 32px;
  border-radius: 56px;
  border: 2px solid #FEFBF3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.eventsSection .card .date {
  font: 400 44px/51px Carrie;
  color: #EDA020;
}
.eventsSection .card h3 {
  font: 400 24px/28px Carrie;
}
.eventsSection .card h4 {
  font: 400 20px/23px Karla;
}
.eventsSection .card .desc {
  font: 400 16px/19px Karla;
  padding: 20px 0;
}
.eventsSection .card .learnmore {
  margin: auto 0 0;
}

.imageSection ~ .eventsSection {
  background: #FEFBF3;
  color: #604C4A;
  padding-top: 60px;
}
.imageSection ~ .eventsSection .container {
  padding: 0 56px;
}
.imageSection ~ .eventsSection h2 {
  border-bottom: 2px solid #604C4A;
}
.imageSection ~ .eventsSection .card {
  border: 2px solid #604C4A;
}
.imageSection ~ .eventsSection .card .date {
  color: #EDA020;
}
.imageSection ~ .eventsSection .card .learnmore {
  color: #604C4A;
}
.imageSection ~ .eventsSection .card .learnmore .svg {
  box-shadow: inset 0 0 0 2px #604C4A;
}
.imageSection ~ .eventsSection .card .learnmore .svg svg {
  fill: #604C4A;
}
@media (pointer: fine) {
  .imageSection ~ .eventsSection .card .learnmore:hover {
    color: #EDA020;
  }
  .imageSection ~ .eventsSection .card .learnmore:hover .svg {
    background: #EDA020;
    box-shadow: inset 0 0 0 2px #EDA020;
  }
  .imageSection ~ .eventsSection .card .learnmore:hover .svg svg {
    fill: #FEFBF3;
  }
}

@media (max-width: 1199px) {
  .eventsSection {
    margin: 30px 0 0;
    padding: 60px 0;
  }
  .eventsSection h2 {
    font: 400 50px/58px Carrie;
  }
  .eventsSection .events {
    padding: 32px 0 0;
    grid: auto/1fr;
  }
  .eventsSection .card {
    padding: 16px;
    border-radius: 20px;
  }
  .eventsSection .card .date {
    font: 400 32px/37px Carrie;
  }
  .eventsSection .card .desc {
    padding: 0 0 16px;
  }
  .imageSection ~ .eventsSection {
    padding-top: 30px;
  }
  .imageSection ~ .eventsSection .container {
    padding: 0 16px;
  }
}
@media (max-width: 767px) {
  .eventsSection h2 {
    font: 400 32px/37px Carrie;
  }
  .eventsSection .card .date {
    font: 400 28px/32px Carrie;
  }
}