/* Adventure page */
:root {
  /* Colors */
  --main-color: #0e64b5;
  --analogous-color: #0e11b5;
  --complementary-color: #b50e11;
  --tertiary-color: #008400;
  --less-saturated-color: #070707;
  --monochromacy-color: #3b3b3b;
  --black-color: #000000;

  --light-grey-color: rgba(59, 59, 59, 0.4);
  --dark-grey-color: var(--monochromacy-color);
  --grey-color: var(--less-saturated-color);

  --link-color: var(--dark-grey-color);
  --link-visited-color: var(--dark-grey-color);
  --nav-color: var(--dark-grey-color);
  --heading-color: var(--dark-grey-color);

  --adventure-color: var(--main-color);
  --developer-color: var(--tertiary-color);
  --comedy-color: var(--complementary-color);

  /* Breakpoints */
  --extra-small: 320px;
  --small: 490px;
  --medium: 1024px;
  --large: 1280px;
  --extra-large: 1920px;
}

h1 {
  font-size: 40px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.adventure-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.adventure-title-image {
  width: 300px;
  height: auto;
}

.adventure-boxes {
  margin-top: 2rem;
}

@media all and (min-width: 490px) {
  h1 {
    font-size: 70px;
  }

  .adventure-title-image {
    width: 490px;
    height: auto;
  }
}

h2 {
  font-size: 30px;
  margin: 0;
}

h2.adventure {
  padding: 10px;
}

@media all and (min-width: 960px) {
  h2 {
    font-size: 40px;
  }
}

@media all and (min-width: 960px) {
  h2 {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

h2.surfing {
  color: var(--adventure-color);
}

h2.bungee {
  color: var(--tertiary-color);
}

h2.first-aid {
  color: var(--complementary-color);
}

.date {
  margin-top: 0;
  text-align: center;
  font-weight: 600;
}

figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

figcaption {
  text-align: left;
}

blockquote {
  padding: 0;
  margin: 20px 0;

  border: none;
  box-shadow: none;
  border-radius: 0;
}

@media all and (min-width: 490px) {
  blockquote {
    padding: 0;
  }
}

figcaption p {
  margin-right: 10px;
  margin-left: 10px;
  line-height: 2em;
}

figcaption p sub {
  display: block;
  text-align: right;
  margin-bottom: 3em;
}


.grid {
  max-width: 375px;
}

@media all and (min-width: 1024px) {
  .adventure-headline {
    grid-area: adventure-headline;
  }

  .it-headline {
    grid-area: it-headline;
  }

  .comedy-headline {
    grid-area: comedy-headline;
  }

  .apple-quote {
    grid-area: apple-quote;
  }

  .bottom_cta {
    grid-area: bottom_cta;
  }

  .grid {
    display: grid;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
    max-width: initial;
    grid-column-gap: 2rem;
    align-content: center;
    grid-template-columns: repeat(3, 1fr);
  }
}

.fast {
  transform: scale(1, 0.92);
  /* W3C */
}

.title {
  max-width: calc(100% - 40px);
  height: auto;
}

.middle {
  text-decoration: none;
}

/* End adventure page */