$content-font-size: 1.22rem;

.media-content {
  width: 100%;
  font-size: $content-font-size;
  font-weight: 400;
  line-height: 1.43;
  color: var(--media-content-text-color);
  font-style: normal;
  text-decoration: none;
  word-break: break-word;

  h2 {
    margin-top: 2.2rem;
    margin-bottom: 0.5rem;
    font-size: 2.2rem;

    code {
      font-size: inherit;
    }
  }

  h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;

    code {
      font-size: inherit;
    }
  }

  h4 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;

    code {
      font-size: inherit;
    }
  }

  pre {
    font-family: var(--font-family-mono);
    font-variant-ligatures: none;
    padding: 10px;
    padding-left: 15px;
    font-size: 1.1rem;
    border-radius: $border-radius;
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  a code,
  a:active code,
  a:visited code,
  a:link code {
    font-family: var(--font-family-mono);
    font-variant-ligatures: none;
    color: var(--media-content-link-code-color);
    font-style: normal;
    text-decoration: none;
  }

  a:hover code {
    background-color: var(--media-content-link-code-hover-bg-color);
  }

  code {
    font-family: var(--font-family-mono);
    font-variant-ligatures: none;
    font-size: 1.05rem;
    color: var(--media-content-code-text-color);
    background-color: var(--media-content-code-bg-color);
    border-radius: $border-radius;
    padding: 3px 8px;
    text-decoration: none;
  }

  blockquote {
    font-size: 1.1rem;
    color: var(--media-content-blockquote-text-color);
    background-color: var(--media-content-blockquote-bg-color);
    border-radius: $border-radius;
    padding: 8px;
    margin: 0px;
  }

  blockquote p {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  ol,
  ul {
    padding-left: 2.5rem;
  }

  a.button {
    color: var(--media-content-button-text-color);
  }

  a {
    text-decoration: none;
    color: var(--media-content-link-color);
  }

  a:hover {
    text-shadow: 0 0 0.9px currentColor, 0 0 0.9px currentColor;
  }

  pre code {
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
