.page {
  padding-bottom: calc(60rem / 16);
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;

  height: 65vh;
  min-height: calc(420rem / 16);
  max-height: calc(580rem / 16);
}

.introTop {
  flex-grow: 1;
}

.introContent {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.introBottom {
  flex-grow: 1;
  min-height: calc(132rem / 16);
}

.clubTitleWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.clubTitleWrapper img {
  height: calc(70rem / 16);
}

.clubTitle {
  font-family: "Futura", "sans-serif";
  font-size: calc(33rem / 16);
  text-align: center;
  color: var(--primary-heading);
}

.clubDescription {
  margin-bottom: calc(50rem / 16);
  text-align: center;
  color: var(--primary-heading);
}

.clubDescription br {
  display: none;
}

.codey {
  position: absolute;
  bottom: calc(-124rem / 16);
  right: calc(20rem / 16);
  z-index: -1;
}

.cardsBackground {
  margin: 0;
  width: 100%;

  background-color: var(--secondary-background);
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: calc(100rem / 16);

  padding: calc(42rem / 16) calc(100rem / 16);
}

.cardsHeading {
  margin: 1rem 0 calc(8rem / 16);
  font-size: calc(24rem / 16);
  font-weight: 700;
}

.cardsDescription {
  margin: calc(8rem / 16) 0 1rem;
}

.cardsDescription br {
  display: none;
}

.cardsDividingLine {
  display: none;
}

.eventCards {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}

/* On a smaller desktop screen, make the events/news flow vertically */
@media only screen and (max-width: calc(1100rem / 16)) {
  .cards {
    flex-direction: column;
    align-items: center;
    gap: calc(32rem / 16);
  }

  .cards > section {
    width: calc(540rem / 16);
    max-width: calc(540rem / 16);
  }
}

@media only screen and (max-width: calc(768rem / 16)) {
  .page {
    padding-bottom: calc(30rem / 16);
  }

  .intro {
    height: calc(330rem / 16);
    min-height: unset;
    max-height: unset;
  }

  .introContent {
    padding: 1rem;
    max-width: calc(260rem / 16);
  }

  .introBottom {
    min-height: calc(100rem / 16);
  }

  .clubTitleWrapper img {
    display: none;
  }

  .clubTitle {
    margin: calc(8rem / 16) 0;
    font-size: calc(20rem / 16);
  }

  .clubDescription {
    margin: calc(8rem / 16) 0 calc(26rem / 16);
    color: var(--primary-heading);
  }

  .clubDescription br {
    display: inline;
  }

  .codey {
    bottom: calc(-46rem / 16);
    right: auto;
    z-index: -1;
    height: calc(120rem / 16);
  }

  .cards {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(8rem / 16);

    padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
  }

  .cards > section {
    width: unset;
    max-width: unset;
  }

  .cardsHeading {
    margin: 0;
    font-size: calc(18rem / 16);
    font-weight: 600;
  }

  .cardsDescription br {
    display: inline;
  }

  .cardsDividingLine {
    display: block;
    margin: 1rem 0 calc(34rem / 16);
    height: calc(1rem / 16);
    border: none;
    background-color: var(--primary-heading);
  }
}