alxshelepenok/gatsby-starter-lumen

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

.content {
  @include margin-auto();
  max-width: $layout-post-single-width;
  @include padding(0, 0.5);

  .title {
    font-size: $typographic-base-font-size * 2;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    max-width: $layout-post-width;
    text-align: center;
    @include line-height(1.65);
    @include margin-top(1);
    @include margin-bottom(0);
  }

  .body {
    figure {
      @include margin-bottom(1);

      blockquote {
        font-style: italic;
        text-align: center;
        @include margin-top(0);
        @include padding(1, 0);

        p {
          font-size: $typographic-base-font-size * 1.6817;
          max-width: $layout-post-width;
          @include margin-top(0);
          @include margin-bottom(1);
          @include line-height(1.5);
        }
      }
    }

    a {
      text-decoration: underline;
    }

    * {
      margin-left: auto;
      margin-right: auto;
      max-width: $layout-post-width;
    }

    h2 > a {
      visibility: hidden;

      & > svg {
        fill: var(--color-typographic-base-font);
      }
    }

    img {
      max-width: 100%;
    }
  }
}

@include breakpoint-md {
  .content {
    @include padding-equal(0);

    .title {
      font-size: $typographic-base-font-size * 3;
      @include line-height(2.25);
      @include margin-top(2.25);
      @include margin-bottom(1.5);
    }

    .body {
      font-size: $typographic-base-font-size * 1.125;
      @include line-height(1.125);
      @include margin-bottom(1.125);

      p {
        font-size: $typographic-base-font-size * 1.125;
        @include line-height(1.125);
        @include margin-bottom(1.125);
      }

      h2 > a {
        visibility: unset;
        @include padding-right(0.5);
      }
    }
  }
}