/* First some text changes to make it more "blog" -like */

.events {
  top: 100px;
  position: relative;
}

.events div {
  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 10px;
  padding: 40px;
}

.events h1 {
  text-align: center;
  font-size: xx-large;
}

.events h2 {
  max-width: 38ch;
  font-size: medium;
  text-align: center;
  margin: auto;
  padding: 50px;
}

.events h3 {
  font-size: x-large;
}

.events p {
  max-width: 70ch;
}

/* Events section */

/* I've split them into two categories based in which side of the image
the text is placed*/

.event-left {
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 40px;
  position: relative;
  justify-content: center;
  width: 70%;
}

.event-right {
  display: flex;
  flex-direction: column-reverse;
  margin: auto;
  padding: 40px;
  position: relative;
  justify-content: center;
  width: 70%;
}

.event-color {
  background-color: #f9f9f9;
}

.image-frame {
  width: 50%;
  height: 169px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 50px 50px 0px 50px;
}

.image-frame > img {
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50px 50px 0px 50px;
}

.image-fit {
  top: 215px !important;
}

/* Bottom section */

.events-bottom {
  margin: auto;
  text-align: center;
  padding: 0px 50px 170px 50px;
}