.callout-box{
  @include callout($ash);

  &__close-btn{
    float: right;
  }

  &--green{
    @include callout($brand-green);
    margin-bottom: $base-margin;
    color: $white;
  }

  &--red{
    @include callout($brand-red);
    margin-bottom: $base-margin;
    color: $white;
  }

  &--ins-blue{
    @include callout($brand-blue-insurance);
    margin-bottom: $base-margin;
    color: $white;
  }

  &__sub-head{
    color: $white;
  }

  &__image-container{
    @include large-2;
  }

  &__image{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  &__content{
    @include large-10;
  }

  &__link{
    color: inherit;
    text-decoration: underline;

    &:hover{
      color: $ash;
    }
  }
}

.callout{
  &__side-arrow{ //this works best if it's a class on a svg element.
    position: absolute;
    z-index: 1;
    top: 0;

    @include breakpoint(small down){
      top: 100%;
      left: 0%;
      height: 30%;
      background-color: $white;
    }

    &--mobile-spacing{
      @include breakpoint(small down){
        margin-top: 50px;
      }
    }
  }
}