// Call out containing a pull quotation or an emphasised fact from the many body of the content. Can also contain a link to an external source. Can contain a heading, but this is optional.
//
// Styleguide Call out

.callout {
  display: block;
  padding: $baseline-unit*3;
  margin: $baseline-unit*4 0;
  border-radius: 10px;
  color: $color-green-tertiary;
  background-color: $color-callout-background;

  > h3 {
    margin: 0 0 $baseline-unit*3 0;
    @extend %heading-extra-small;
  }

  > p {
    @extend %font-heading-medium;
    @extend %type-links;
    margin-top: 0;
  }

  .editorial & {
    @include respond-to($mq-l) {
      @include column(4, 8);
      float: right;
      margin: 0 $baseline-unit*2 $baseline-unit $baseline-unit*2;
    }
  }
}

// Call out containing a pull quotation or an emphasised fact from the many body of the content. Can also contain a link to an external source. Can contain a heading, but this is optional.
//
// Styleguide Call out

.callout {
  display: block;
  padding: $baseline-unit*3;
  margin: $baseline-unit*4 0;
  border-radius: 10px;
  color: $color-green-tertiary;
  background-color: $color-callout-background;

  > h3 {
    margin: 0 0 $baseline-unit*3 0;
    @extend %heading-extra-small;
  }

  > p {
    @extend %font-heading-medium;
    @extend %type-links;
    margin-top: 0;
  }

  .editorial & {
    @include respond-to($mq-l) {
      @include column(4, 8);
      float: right;
      margin: 0 $baseline-unit*2 $baseline-unit*2 $baseline-unit*2;
    }
  }
}

Adjust spacing for the component
Adjust spacing for the component
