.circle-step {

    & > p, & > h2 {
        margin-left: 32px;
    }

    & > h2 {
        margin-bottom: 0.3em;
    }

    .circle-step-circle {
        float: left;
        margin-top: -0.2em;
        display: inline-block;
        @include border-radius(50%);

        background: govuk-colour("black");
        color: govuk-colour("white");

        min-width: 24px;
        min-height: 24px;
        height: 24px;
        max-height: 24px;

        font-size: 12px;
        line-height: 26px;
        font-weight: bold;
        text-align: center;
    }

    &.circle-step-large > p, &.circle-step-large > h2 {
        margin-left: 43px;
    }

    &.circle-step-large > .circle-step-circle {
        font-size: 19px;
        line-height: 40px;
        min-width: 38px;
        min-height: 38px;
        height: 38px;
        max-height: 38px;
    }
}