/**
 * @file
 * Page introduction
 *
 * Contains styles for page introduction object.
 */

.page-intro {
  @include animate-border($color-green);

  margin: 30px 0;
  padding: 20px;
  @include fontsize(18px);
  font-family: $font-acumen-cond;
  font-style: italic;
  font-weight: 800;
  line-height: 1.4;
  color: $color-green-dark;
  position: relative;

  span.circle:before {
    display: block;
    content: "";
    width: 10px;
    height: 20px;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    @media (min-width: $break-medium) {
      height: 40px;
    }
  }

  span.circle:after {
    display: block;
    content: "";
    background: white;
    border: solid 2px $color-green;
    border-radius: 100px;
    height: 10px;
    width: 10px;
    position: absolute;
    top: -5px;
    left: -3px;
    z-index: 2;

    @media (min-width: $break-medium) {
      height: 15px;
      width: 15px;
      left: -8px;
      top: -7px;
    }

    @media (min-width: $break-large) {
      height: 18px;
      width: 18px;
      left: -10px;
      top: -9px;
      border: solid 3px $color-green;
    }
  }

  @media screen and (min-width: $break-medium) {
    margin: 4rem 0;
    padding: 30px 32px;
    @include fontsize(21px);
    line-height: 1.4;
  }

  @media screen and (min-width: $break-large) {
    margin: 4rem 0 5rem;
    font-size: 32px;
    line-height: 45px;
    padding: 48px 45px 48px 48px;
  }
}