/* =Introduction
  ----------------------------------------------- */
  .introduction {
    margin-bottom: 4.5em;
  }
  p + .introduction {
    margin-top: 4.5em;
  }
  .introduction p,
  .introduction h3 {
    text-align: center;
    max-width: none;
  }
  .introduction p[style*="max-width"] {
    margin-left: auto;
    margin-right: auto;
  }
  .introduction h3 {
    margin-top: 0;
    font-size: 1.5em;
    font-weight: inherit;
    color: inherit;
  }
  .introduction strong {
    display: inline-block;
  }
  .introduction p:first-child {
    margin-top: 0;
  }

  .introduction p:not(.action) {
    font-size: 1.25em;
  }
  @media (min-width: 40em) {
    .introduction p:not(.action) {
      font-size: 1.5em;
    } 
  }

  .introduction .action {
    margin-top: 1.875em;
  }
  .introduction .action a {
    background-color: var(--strawberry);
    border: 0.1875em solid var(--strawberry);
  }
  .introduction .action a:hover,
  .introduction .action a:active,
  .introduction .action a:focus {
    background-color: var(--snow);
    color: var(--strawberry);
  }

  .strawberry .introduction .action a {
    background-color: var(--banana);
    border: 0.1875em solid var(--banana);
  }
  .strawberry .introduction .action a:hover,
  .strawberry .introduction .action a:active,
  .strawberry .introduction .action a:focus {
    background-color: var(--snow);
    color: var(--banana);
  }

  .blueberry .introduction .action a {
    background-color: var(--banana);
    border: 0.1875em solid var(--banana);
  }
  .blueberry .introduction .action a:hover,
  .blueberry .introduction .action a:active,
  .blueberry .introduction .action a:focus {
    background-color: var(--snow);
    color: var(--banana);
  }