body {
  margin: 0;
  background: var(--white);
}

#event {
  padding: 2vw 2vw 6vw 4vw;
  display: flex;
  flex-wrap: wrap;
  font-family: "DM Sans", sans-serif;

  > div {
    padding: 3vw;
  }

  #date {
    max-width: fit-content;
  }

  #event-left h1 {
    font-size: clamp(24pt, 3.5vw, 3.5vw);
  }

  #event-left {
    @media only screen and (max-width: 600px) {
      max-width: 80vw;
    }
    @media only screen and (min-width: 600px) {
      max-width: 50vw;
    }
  }

  #event-right {
    width: 60vw;
  }

  #event-right img {
    width: 100%;
  }

  p {
    margin-top: 30px;
    line-height: 1.6;
  }

  a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--black);
    opacity: 1;
    transition: opacity 300ms;
  }

  a:hover {
    opacity: 0.6;
  }
}

.pre-hero {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  padding: 40px 20px 40px 20px;
  display: inline-block;

  a {
    transition: font-weight 300ms;
    margin-left: 25px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--black);
  }

  img {
    transform: rotate(180deg) translateX(-20%);
    transition: transform 300ms;
  }
}

.pre-hero:hover {
  cursor: pointer;
}

.pre-hero:hover a {
  font-weight: 200;
}

.pre-hero:hover img {
  transform: rotate(180deg);
}

#date {
  font-family: "DM Sans", sans-serif;
}