@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;
  }

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

  .blockquote {
    @include font-style($font-serif, 'regular-italic', $font-30);
    color: $gray;
    padding: 0;
    margin: 0 0 50px 0;
    text-align: center;
  }

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



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