.blockquote-container {
  &.blockquote-left {
    float: left;
    width: 35%;
    margin-right: $global-margin;

    @include breakpoint (small only) {
      float: none;
      margin: 0;
      width: 100%;
    }
  }

  &.blockquote-right {
    float: right;
    width: 35%;
    margin-left: $global-margin;
  }

  .callout {
    .blockquote-title {
      margin-left: 1rem;
    }

    blockquote {
      quotes: "“""”""‘""’  ";
      border-left: none;

      &:before {
        content: open-quote;
        color: $dark-gray;
        font-size: 4em;
        line-height: 0.1em;
        vertical-align: -0.4em;
      }

      &:after {
        content: close-quote;
        color: $dark-gray;
        font-size: 4em;
        line-height: 0.1em;
        vertical-align: -0.6em;
      }

      .blockquote-content {
        display: inline;
        color: $black;
      }
    }
  }
}
