<section class="rtds-video-gallery">
<div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
<div>
<div class="rtds-section-header">
<div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
<div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
<div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<h2 class="rtds-heading-3 md:rtds-heading-2">Video</h2>
</div>
</div>
</div>
</div>
<ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 rtds-gap-4">
<li>
<div class="rtds-video-item rtds-border rtds-border-gray-01">
<div class="rtds-video-item__heading">
<h3 class="rtds-video-item__title rtds-heading-3">
Titolo video lorem ipsum dolor sit amet
</h3>
<p class="rtds-video-item__description">
descrizione video lorem ipsum dolor sit amet
</p>
</div>
<div class="rtds-aspect-video">
<iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<div class="rtds-p-4">
<a href="#" class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
<span class='rtds-sr-only'>Titolo video lorem ipsum dolor sit amet - </span>Trascrizione
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
</a>
</div>
</div>
</li>
<li>
<div class="rtds-video-item rtds-border rtds-border-gray-01">
<div class="rtds-video-item__heading">
<h3 class="rtds-video-item__title rtds-heading-3">
Titolo video lorem ipsum dolor sit amet
</h3>
<p class="rtds-video-item__description">
descrizione video lorem ipsum dolor sit amet
</p>
</div>
<div class="rtds-aspect-video">
<iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<div class="rtds-p-4">
<a href="#" class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
<span class='rtds-sr-only'>Titolo video lorem ipsum dolor sit amet - </span>Trascrizione
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
</a>
</div>
</div>
</li>
<li>
<div class="rtds-video-item rtds-border rtds-border-gray-01">
<div class="rtds-video-item__heading">
<h3 class="rtds-video-item__title rtds-heading-3">
Titolo video lorem ipsum dolor sit amet
</h3>
<p class="rtds-video-item__description">
descrizione video lorem ipsum dolor sit amet
</p>
</div>
<div class="rtds-aspect-video">
<iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<div class="rtds-p-4">
<a href="#" class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
<span class='rtds-sr-only'>Titolo video lorem ipsum dolor sit amet - </span>Trascrizione
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
</a>
</div>
</div>
</li>
<li>
<div class="rtds-video-item rtds-border rtds-border-gray-01">
<div class="rtds-video-item__heading">
<h3 class="rtds-video-item__title rtds-heading-3">
Titolo video lorem ipsum dolor sit amet
</h3>
<p class="rtds-video-item__description">
descrizione video lorem ipsum dolor sit amet
</p>
</div>
<div class="rtds-aspect-video">
<iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<div class="rtds-p-4">
<a href="#" class="rtds-action-link
rtds-card__action-link rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
<span class='rtds-sr-only'>Titolo video lorem ipsum dolor sit amet - </span>Trascrizione
<svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-text" />
</svg>
</a>
</div>
</div>
</li>
</ul>
</div>
</section>
{% extends '@video-gallery' %}
{% block videoItem %}
{% render '@video-item--box' %}
{% endblock videoItem %}
/* No context defined. */
@layer components {
.rtds-video-item {
@apply rtds-aspect-video;
}
.rtds-video-item iframe {
@apply !rtds-w-full !rtds-h-full;
}
}
No notes defined.