.callout {
    position: relative;

    img {
        margin-bottom: -5%;
        margin-right: -20%;
        width: 400px;
        max-width: 120%;
        height: auto;
    }

    p {
        line-height: 1.5;
        margin-bottom: 16px;
    }

    &:before {
        content: "";
        position: absolute;
        left: 16px;
        top: 0;
        right: 16px;
        bottom: 0;
        display: block;
    }

    $bg-offset: 32px;
    &:before {
        background-color: $gray-lighter;
        top: $bg-offset;
        bottom: $bg-offset;
        z-index: -2;
    }

    .callout-content {
        padding: $bg-offset*1.25 0;
    }

    @media(max-width: $grid-float-breakpoint-max) {
        margin-bottom: 30px;

        img {
            max-width: 70%;
            margin-bottom: -15px;
            margin-right: 0;
        }
        .callout-content {
            padding: 0 16px $bg-offset*1.5;
            text-align: center;
        }
        &:after {
            left: $bg-offset/2;
            right: $bg-offset/2;
        }
    }
}

.container-callout {
  position: relative;
}

.callout-caption-top {
  @media(min-width: $grid-float-breakpoint) {
    position: absolute;
    top: 10%;
  }
}