related-videos

<div class="spacer spacer--10" id="videos"></div>

<div class="section-header section-header--centered">
    <h2 class="section-header__heading heading heading--4">Related videos</h2>

    <div class="section-header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, delectus?</div>
</div>

<div class="spacer spacer--10"></div>

<section class="media media--grid media--grid--B">
    <div class="media__in">
        <div class="media__inner">
            <div class="media__content">
                <div class="media__item in-view">
                    <div class="media__item__inner">
                        <div class="video-player">
                            <picture class="visual">
                                <source media="(max-width: 749px)" srcset="https://via.placeholder.com/704x412?text=1">
                                <source media="(min-width: 750px)" srcset="https://via.placeholder.com/1110x650?text=1">
                                <img src="https://via.placeholder.com/1110x650?text=1" alt="">
                            </picture>

                            <a class="video-player__trigger">
                                <span class="video-ID">tRNUUPlq8f0</span>
                                <span class="icon-play">
                                    <span class="icon-play__inner"></span>

                                    <span class="icon-play__icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="media__item in-view">
                    <div class="media__item__inner">
                        <div class="video-player">
                            <picture class="visual">
                                <source media="(max-width: 749px)" srcset="https://via.placeholder.com/704x412?text=2">
                                <source media="(min-width: 750px)" srcset="https://via.placeholder.com/1110x650?text=2">
                                <img src="https://via.placeholder.com/1110x650?text=2" alt="">
                            </picture>

                            <a class="video-player__trigger">
                                <span class="video-ID">u-1NmGu-3Og</span>
                                <span class="icon-play">
                                    <span class="icon-play__inner"></span>

                                    <span class="icon-play__icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="media__item in-view">
                    <div class="media__item__inner">
                        <div class="video-player">
                            <picture class="visual">
                                <source media="(max-width: 749px)" srcset="https://via.placeholder.com/704x412?text=3">
                                <source media="(min-width: 750px)" srcset="https://via.placeholder.com/1110x650?text=3">
                                <img src="https://via.placeholder.com/1110x650?text=3" alt="">
                            </picture>

                            <a class="video-player__trigger">
                                <span class="video-ID">kS-8bYaBxPk</span>
                                <span class="icon-play">
                                    <span class="icon-play__inner"></span>

                                    <span class="icon-play__icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="media__item in-view">
                    <div class="media__item__inner">
                        <div class="video-player">
                            <picture class="visual">
                                <source media="(max-width: 749px)" srcset="https://via.placeholder.com/704x412?text=4">
                                <source media="(min-width: 750px)" srcset="https://via.placeholder.com/1110x650?text=4">
                                <img src="https://via.placeholder.com/1110x650?text=4" alt="">
                            </picture>

                            <a class="video-player__trigger">
                                <span class="video-ID">kiTBRnpyyNg</span>
                                <span class="icon-play">
                                    <span class="icon-play__inner"></span>

                                    <span class="icon-play__icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="media__item in-view">
                    <div class="media__item__inner">
                        <div class="video-player">
                            <picture class="visual">
                                <source media="(max-width: 749px)" srcset="https://via.placeholder.com/704x412?text=5">
                                <source media="(min-width: 750px)" srcset="https://via.placeholder.com/1110x650?text=5">
                                <img src="https://via.placeholder.com/1110x650?text=5" alt="">
                            </picture>

                            <a class="video-player__trigger">
                                <span class="video-ID">jylI9us08Q0</span>
                                <span class="icon-play">
                                    <span class="icon-play__inner"></span>

                                    <span class="icon-play__icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="spacer spacer--15"></div>