<ul class="m-list-thumb row">
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner row">
			<div class="col-auto">
				<div class="m-list-thumb__medium">
					<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Lorem ipsum dolor" class="m-list-thumb__file" loading="lazy">
				</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-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner row">
			<div class="col-auto">
				<div class="m-list-thumb__medium">
					<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce tellus Nunc" class="m-list-thumb__file" loading="lazy">
				</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-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner row">
			<div class="col-auto">
				<div class="m-list-thumb__medium">
					<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce aliquam vestibulum" class="m-list-thumb__file" loading="lazy">
				</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-thumb row">
	<li class="m-list-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner text-center">
			<div class="m-list-thumb__medium">
				<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Lorem ipsum dolor" class="m-list-thumb__file" loading="lazy">
			</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-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner text-center">
			<div class="m-list-thumb__medium">
				<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce tellus Nunc" class="m-list-thumb__file" loading="lazy">
			</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-thumb__item col-md-12 col-lg-8">
		<div class="m-list-thumb__inner text-center">
			<div class="m-list-thumb__medium">
				<img src="https://placehold.it/90x90" srcset="https://placehold.it/90x90 1x, https://placehold.it/180x180 2x" width="90" height="90" alt="Fusce aliquam vestibulum" class="m-list-thumb__file" loading="lazy">
			</div>
			<p>
				<strong> Fusce aliquam vestibulum </strong>
			</p>
			<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
		</div>
	</li>
</ul>

.m-list-thumb {

    list-style: none;

    &__medium {

        border-radius: 50%;
        display: inline-block;

    }

    &__file {

        border-radius: 50%;
        display: block;
        height: auto;
        max-width: 3rem;

        @media(min-width: breakpoint-min(md)) {

            max-width: 10rem;

        }

    }

}