<div class="m-gallery row">
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="Popis obrázku (volitelně)" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="Popis videa (volitelně)">
			<i class="m-gallery__icon a-icon-play" aria-hidden="true"></i>
		</a>
		<p class="m-gallery__alt"> Popis videa (volitelně) </p>
	</div>
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="Popis obrázku (volitelně)" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="Popis obrázku (volitelně)">
		</a>
		<p class="m-gallery__alt"> Popis obrázku (volitelně) </p>
	</div>
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="(3)">
		</a>
	</div>
	<div class="m-gallery__column col-sm-12 col-md-8 col-lg-6">
		<a href="https://placehold.it/1024x768/" title="" class="m-gallery__item" rel="pswp">
			<img src="https://placehold.it/345x220" width="345" height="220" loading="lazy" class="m-gallery__thumb" alt="(4)">
		</a>
	</div>
</div>

.m-gallery {

    &__item {

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

    }

    &__thumb {

        display: block;
        width: 100%;

    }

    &__icon {

        @include calc-size(font-size, 30px, 60px);
        color: color('white');
        left: 50%;
        margin: em(-50%);
        position: absolute;
        top: 50%;

    }

}