<ul class="m-list-icon row">
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner row">
			<div class="col-auto">
				<div class="m-list-icon__medium">
					<i aria-hidden="true" class="m-list-icon__char icon-star"></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-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner row">
			<div class="col-auto">
				<div class="m-list-icon__medium">
					<i aria-hidden="true" class="m-list-icon__char icon-life-buoy"></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-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner row">
			<div class="col-auto">
				<div class="m-list-icon__medium">
					<i aria-hidden="true" class="m-list-icon__char icon-settings"></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>
</ul>

<hr class="my-3">

<ul class="m-list-icon row">
	<li class="m-list-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner text-center">
			<div class="m-list-icon__medium">
				<i aria-hidden="true" class="m-list-icon__char icon-star"></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-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner text-center">
			<div class="m-list-icon__medium">
				<i aria-hidden="true" class="m-list-icon__char icon-life-buoy"></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-icon__item col-md-12 col-lg-8">
		<div class="m-list-icon__inner text-center">
			<div class="m-list-icon__medium">
				<i aria-hidden="true" class="m-list-icon__char icon-settings"></i>
			</div>
			<p>
				<strong> Fusce aliquam vestibulum </strong>
			</p>
			<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
		</div>
	</li>
</ul>

.m-list-icon {

    list-style: 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 {

        align-items: center;
        box-sizing: content-box;
        display: flex;
        height: em(100%);
        justify-content: center;
        padding: em(10px, xx-large);
        text-align: center;
        width: em(100%);

        &:before {

            font-size: em(75%);
            vertical-align: middle;

        }

    }

}