<div style="position: relative; width: 300px; z-index: 0">
	<div class="m-partner-item">
		<div class="m-partner-item__placeholder">
			<img src="https://placehold.it/100x100" srcset="https://placehold.it/100x100 1x, https://placehold.it/200x200 2x" width="100" height="100" alt="Mgr. John Doe" class="m-partner-item__thumb" loading="lazy">
			<div class="m-partner-item__border"></div>
		</div>
		<div class="m-partner-item__text">
			<p>
				<strong> Mgr. John Doe </strong>
			</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		</div>
	</div>
</div>

.m-partner-item {

    border-bottom: 1px solid color('gray-light');
    border-radius: $base-radius;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;

    &:link {

        @include text-underline(none);
        display: block;

    }

    &__border {

        border: 1px solid color('gray-light');
        border-bottom: 0;
        border-radius: $base-radius;
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        z-index: -1;

    }

    &__placeholder {

        display: inline-block;

        &:after {

            content: '';
            display: block;
            padding-bottom: 50%;

        }

    }

    &__thumb {

        margin-bottom: -50%;

    }

    &__text {

        padding: space(1);

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

            padding: space(2);

        }

    }

}