<ol class="m-list-ol row">
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner row">
			<div class="col-auto">
				<div class="m-list-ol__medium">
					<i class="m-list-ol__char" aria-hidden="true"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Lorem ipsum dolor </strong>
				</p>
				<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
			</div>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner row">
			<div class="col-auto">
				<div class="m-list-ol__medium">
					<i class="m-list-ol__char" aria-hidden="true"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce tellus Nunc </strong>
				</p>
				<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
			</div>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner row">
			<div class="col-auto">
				<div class="m-list-ol__medium">
					<i class="m-list-ol__char" aria-hidden="true"></i>
				</div>
			</div>
			<div class="col">
				<p>
					<strong> Fusce aliquam vestibulum </strong>
				</p>
				<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
			</div>
		</div>
	</li>
</ol>

<hr class="my-3">

<ol class="m-list-ol row">
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner text-center">
			<div class="m-list-ol__medium">
				<i class="m-list-ol__char" aria-hidden="true"></i>
			</div>
			<p>
				<strong> Lorem ipsum dolor </strong>
			</p>
			<p>Aenean placerat. Curabitur vitae diam non enim vestibulum interdum.</p>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner text-center">
			<div class="m-list-ol__medium">
				<i class="m-list-ol__char" aria-hidden="true"></i>
			</div>
			<p>
				<strong> Fusce tellus Nunc </strong>
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
		</div>
	</li>
	<li class="m-list-ol__item col-md-12 col-lg-8">
		<div class="m-list-ol__inner text-center">
			<div class="m-list-ol__medium">
				<i class="m-list-ol__char" aria-hidden="true"></i>
			</div>
			<p>
				<strong> Fusce aliquam vestibulum </strong>
			</p>
			<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
		</div>
	</li>
</ol>

.m-list-ol {

    counter-reset: ol;
    list-style: none;

    &__item {

        &:before {

            display: none;

        }

    }

    &__medium {

        @include font-size(xx-large);
        border: 1px solid color('gray-light');
        border-radius: 50%;
        display: inline-block;
        padding: em(10px, xx-large);

    }

    & #{&}__char {

        box-sizing: content-box;
        display: block;
        height: em(100%);
        line-height: 1;
        padding: em(10px, xx-large);
        text-align: center;
        width: em(100%);

        &:before {

            content: counter(ol);
            counter-increment: ol;
            display: inline-block;
            font-style: normal;

        }

    }

}