@mixin richtext
{
    @include clear-inside;

    text-align: left;

    h2
    {
        @include large-heading;
        @include font-dimensions(22px, 30px);
    }
    h3
    {
        @include normal-heading;
        @include font-dimensions(20px, 26px);
    }
    h4
    {
        @include small-heading;
        @include font-dimensions(18px, 22px);
    }

    p
    {
        @include font-dimensions(11px, 13px);
        @include font-dimensions(16px, 24px);
    }

    ul, ol
    {
        @include bullet-list;

        > li
        {
            @include font-dimensions(16px, 24px);

            padding-top: 9px;
            padding-bottom: 1px;
            margin-bottom: 0;
        }
    }

    ul:not(ol) > li
    {
        padding-left: steps(3.5);

        &::before
        {
            top: 20px;
            margin-left: steps(-3.5);
            width: steps(1.5);
        }
    }

    iframe
    {
        border: 0;

        html:not(.js) &
        {
            display: block;
            max-width: 100%;
            margin-bottom: steps(3);
        }
    }

    .iframe-box
    {
        position: relative;

        margin-bottom: steps(3);

        > iframe
        {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    }
}
