aside.info-banner
{
    @include column-container;
    @include colored-background;

    overflow: hidden;
    margin-top: steps(4);
    margin-bottom: steps(-4);

    &.reversed {
        flex-direction: row-reverse;
    }

    @include for-at-least-normal-tablets
    {
        margin-top: steps(6);
        margin-bottom: steps(-10);
    }

    @include for-desktops
    {
        margin-top: steps(10);
    }

    > .content
    {
        @include half-column;

        padding: steps(2) steps(3) steps(3);

        @include for-desktops
        {
            padding: steps(3.5) steps(5) steps(5);
        }
    }

    .image-block
    {
        min-height: steps(26);

        @include for-at-least-normal-tablets
        {
            min-height: steps(38);
        }
    }

    .text-block
    {
        @include antialiasing;

        .subheading
        {
            position: absolute;
        }

        .heading-block
        {
            display: flex;
            margin-top: steps(8);

            .bubble-wrapper
            {
                padding-left: steps(4);
            }
        }

        .heading
        {
            @include extra-large-heading;

            margin-bottom: steps(0.5);
            color: $color-brand-darker;

            @include for-at-least-normal-tablets
            {
                max-width: steps(50);
                margin-bottom: steps(1);
            }
        }

        .subheading
        {
            @include small-text(20);

            margin: 0;
            font-weight: bold;
            color: $color-brand-darkest;
        }

        .description
        {
            @include small-text;
            color: $color-text-darker;
        }

        .button
        {
            @include for-phones
            {
                padding-left: steps(1);
                padding-right: steps(1);
            }
        }

        .excuse
        {
            @include font-dimensions(10px, 12px);
            color: $color-pretext-normal;
            margin: 0;
            padding: 0;

            &:first-child
            {
                margin-top: steps(2);
            }
        }

        @include for-at-least-normal-tablets
        {
            display: flex;
            flex-direction: column;

            background-position: 60% -196px;

            .description
            {
                flex: 1 0 auto;
                max-width: steps(31);
            }

            .action
            {
                margin-top: steps(2);
            }
        }
    }

    @include responsive-banner;

    @include for-phones
    {
        .text-block .heading-block
        {
            margin-top: steps(4.5);
        }
    }
}
