@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-content {
  //padding-top: $header-height-mobile+60px;

  .title {
    display: block;
    @include font-style($font-serif, 'regular', $font-46);
    line-height: $font-40;
    color: $olive-dark;
    padding: 0;
    margin: 30px 0 20px 0;
  }

  .subtitle {
    display: block;
    @include font-style($font-serif, 'regular', $font-32);
    line-height: $font-30;
    color: $olive-dark;
    padding: 0;
    margin: 20px 0;
  }

  .paragraph {
    display: block;
    @include font-style($font-sans, 'regular', $font-16);
    color: $gray;
    padding: 0;
    margin: 0 0 30px 0;
  }

  .blockquote {
    display: block;
    @include font-style($font-serif, 'regular-italic', $font-30);
    color: $gray;
    padding: 0 20px;
    margin: 0 0 50px 0;
    text-align: center;
    border-right: 2px solid $black-alpha;
    border-left: 2px solid $black-alpha;
  }

  .image {
    width: 100%;
    padding: 0;
    margin: 0 0 30px 0;
  }

  li {
    list-style: disc;
    padding: 5px;
    margin-left: 25px;
  }

  a {
    color: $brown;
  }
}



@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-content {
    //padding-top: $header-height+60px;
  }
}