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

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

  .title {
    @include font-style($font-serif, 'regular', $font-52);
    color: $olive-dark;
    padding: 30px 0;
    margin: 0;
  }

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

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

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



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