<div class="c-video-library" data-bkg-theme="">
<div class="o-container">
<div class="c-video-library__header o-row">
<h2 class="c-video-library__title f-title--h3 o-col">Video series title</h2>
<p class="c-video-library__description f-text--reg o-col o-col-sm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet.</p>
</div>
<div class="o-row c-video-library__videos">
<div class="c-video-library__current o-col o-col-sm-8">
<div class="c-video-library__current-item js-video-library-video is-active show-poster" data-idx="1">
<div class="c-video-library__current-item-embed">
<button class="c-video-library__current-trigger js-video-library-play-self">
<span class="u-sr-only">Play Spinosaurus delivery</span>
<span class="c-video-library__current-icon" aria-hidden="true">
<svg width="24" height="26" viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg">
<path d="M24 13L-1.1365e-06 26L0 -1.04907e-06L24 13Z" />
</svg>
</span>
</button>
<div class="c-video-library__current-item-poster">
<img src="/images/video-library/1.jpg" alt="" />
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nR96FYJkMj8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="c-video-library__current-item-content">
<h3 class="c-video-library__current-item-title f-title--h4">Spinosaurus delivery</h3>
<p class="c-video-library__current-item-description f-text--reg">On June 26, 2019 a Spinosaurus was transported on flat bed truck from New Jersey, over the Ben Franklin Bridge, through the streets of Philadelphia to the Academy.</p>
<div class="c-video-library__current-item-tags">
<a class="c-tag f-text--tag" href=#>topic tag</a>
<a class="c-tag f-text--tag" href=#>topic tag</a>
</div>
</div>
</div>
<div class="c-video-library__current-item js-video-library-video" data-idx="2">
<div class="c-video-library__current-item-embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/PrhxqTH3Sq8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="c-video-library__current-item-content">
<h3 class="c-video-library__current-item-title f-title--h4">Drawn to Dinosaurs: An Interview with Artist Christopher DiPiazza</h3>
<p class="c-video-library__current-item-description f-text--reg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="c-video-library__current-item-tags">
<a class="c-tag f-text--tag" href=#>topic tag</a>
<a class="c-tag f-text--tag" href=#>topic tag</a>
</div>
</div>
</div>
<div class="c-video-library__current-item js-video-library-video" data-idx="3">
<div class="c-video-library__current-item-embed">
<iframe src=https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fbusiness.facebook.com%2FAcademyofNaturalSciences%2Fvideos%2F885106555431745%2F&show_text=false&width=560&t=0 width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</div>
<div class="c-video-library__current-item-content">
<h3 class="c-video-library__current-item-title f-title--h4">What are Dioramas?</h3>
<p class="c-video-library__current-item-description f-text--reg">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="c-video-library__current-item-tags">
<a class="c-tag f-text--tag" href=#>topic tag</a>
<a class="c-tag f-text--tag" href=#>topic tag</a>
</div>
</div>
</div>
<div class="c-video-library__current-item js-video-library-video" data-idx="4">
<div class="c-video-library__current-item-embed">
<iframe src="https://player.vimeo.com/video/124423728" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="c-video-library__current-item-content">
<h3 class="c-video-library__current-item-title f-title--h4">Academy Connection: Extreme Bugs</h3>
<p class="c-video-library__current-item-description f-text--reg">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="c-video-library__current-item-tags">
<a class="c-tag f-text--tag" href=#>topic tag</a>
<a class="c-tag f-text--tag" href=#>topic tag</a>
</div>
</div>
</div>
</div>
<div class="c-video-library__next o-col o-col-sm-4">
<ul class="c-video-library__items c-video-library__items--desktop">
<li class="c-video-library__item">
<button class="c-video-library__item-button js-video-library-play" data-idx="1" aria-label="Play Spinosaurus delivery" disabled>
<span class="c-video-library__item-image">
<img src="/images/video-library/1.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">Spinosaurus delivery</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">05:21</span>
</span>
</span>
</button>
</li>
<li class="c-video-library__item">
<button class="c-video-library__item-button js-video-library-play" data-idx="2" aria-label="Play Drawn to Dinosaurs: An Interview with Artist Christopher DiPiazza">
<span class="c-video-library__item-image">
<img src="/images/video-library/2.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">Drawn to Dinosaurs: An Interview with Artist Christopher DiPiazza</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">24:37</span>
</span>
</span>
</button>
</li>
<li class="c-video-library__item">
<button class="c-video-library__item-button js-video-library-play" data-idx="3" aria-label="Play What are Dioramas?">
<span class="c-video-library__item-image">
<img src="/images/video-library/3.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">What are Dioramas?</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">06:28</span>
</span>
</span>
</button>
</li>
<li class="c-video-library__item">
<button class="c-video-library__item-button js-video-library-play" data-idx="4" aria-label="Play Academy Connection: Extreme Bugs">
<span class="c-video-library__item-image">
<img src="/images/video-library/4.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">Academy Connection: Extreme Bugs</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">10:42</span>
</span>
</span>
</button>
</li>
</ul>
<div class="c-video-library__items--mobile c-video-library__slider swiper-container">
<div class="c-video-library__items swiper-wrapper">
<div class="c-video-library__item swiper-slide">
<button class="c-video-library__item-button js-video-library-play" data-idx="1" aria-label="Play Spinosaurus delivery" disabled>
<span class="c-video-library__item-image">
<img src="/images/video-library/1.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">Spinosaurus delivery</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">05:21</span>
</span>
</span>
</button>
</div>
<div class="c-video-library__item swiper-slide">
<button class="c-video-library__item-button js-video-library-play" data-idx="2" aria-label="Play Drawn to Dinosaurs: An Interview with Artist Christopher DiPiazza">
<span class="c-video-library__item-image">
<img src="/images/video-library/2.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">Drawn to Dinosaurs: An Interview with Artist Christopher DiPiazza</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">24:37</span>
</span>
</span>
</button>
</div>
<div class="c-video-library__item swiper-slide">
<button class="c-video-library__item-button js-video-library-play" data-idx="3" aria-label="Play What are Dioramas?">
<span class="c-video-library__item-image">
<img src="/images/video-library/3.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">What are Dioramas?</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">06:28</span>
</span>
</span>
</button>
</div>
<div class="c-video-library__item swiper-slide">
<button class="c-video-library__item-button js-video-library-play" data-idx="4" aria-label="Play Academy Connection: Extreme Bugs">
<span class="c-video-library__item-image">
<img src="/images/video-library/4.jpg" alt="" />
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">Academy Connection: Extreme Bugs</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon"><svg width="11" height="12" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11 6L4.29138e-07 12L9.53674e-07 -4.80825e-07L11 6Z" />
</svg>
</span>
<span class="c-video-library__item-length-text">10:42</span>
</span>
</span>
</button>
</div>
</div>
</div>
<div class="c-video-library__cta-wrapper">
<a href="#" class="c-video-library__cta o-btn o-btn--expanding-arrow" target="blank" rel="noopener nofollow">
<span class="c-video-library__cta-icon" aria-hidden="true"><svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5863 21.6977L17.5877 21.6977C19.1432 21.6651 20.6263 21.6341 22.1081 21.5853C23.7479 21.5314 25.3878 21.4468 27.0148 21.2107C28.2902 21.0259 29.291 20.4228 29.9685 19.3116C30.3355 18.7086 30.4664 18.0311 30.5793 17.351C30.859 15.683 30.9411 13.9995 30.9976 12.3135C31.0592 10.512 31.0232 8.70793 30.8718 6.91413C30.782 5.85427 30.6563 4.78928 30.4484 3.74739C30.0943 1.98182 28.9959 0.878332 27.2098 0.588346C25.996 0.390746 24.7642 0.280397 23.5349 0.213675C21.6231 0.111026 19.7061 0.0597009 17.7891 0.0237731C14.6789 -0.0352507 11.566 0.0186405 8.45829 0.152085C6.97243 0.216241 5.48658 0.295795 4.01099 0.503661C2.91521 0.657636 2.02215 1.15292 1.32927 2.01518C0.795491 2.67983 0.574795 3.4651 0.441351 4.28887C0.171896 5.95179 0.076945 7.62754 0.0256201 9.30587C-0.0462345 11.7746 0.0256201 14.2382 0.336135 16.6889C0.418255 17.3382 0.515772 18.0029 0.739034 18.6136C1.30874 20.1662 2.48921 21.0182 4.11364 21.2055C5.42499 21.3569 6.74404 21.4852 8.06308 21.5417C9.74026 21.609 11.4197 21.6496 13.0282 21.6885L13.0298 21.6885C13.813 21.7075 14.5793 21.726 15.3204 21.747C16.097 21.7289 16.8498 21.7131 17.5863 21.6977ZM12.4258 15.4937V6.22186C14.2461 7.27367 16.0569 8.31841 17.8734 9.36646L20.4735 10.8668C18.3234 12.1007 16.1929 13.3264 14.0493 14.5597L12.4258 15.4937Z" fill="white" />
</svg>
</span>
Explore More Videos
<span class="o-btn__icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'video-library-' ~ random(5000) %}
{% set idAttr = id is defined ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-video-library" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<div class="c-video-library__header o-row">
<h2 class="c-video-library__title f-title--h3 o-col">{{ title }}</h2>
{% if description %}
<p class="c-video-library__description f-text--reg o-col o-col-sm-8">{{ description }}</p>
{% endif %}
</div>
<div class="o-row c-video-library__videos">
<div class="c-video-library__current o-col o-col-sm-8">
{% for item in videos %}
<div class="c-video-library__current-item js-video-library-video{% if loop.first %} is-active show-poster{% endif %}" data-idx="{{ loop.index }}">
<div class="c-video-library__current-item-embed">
{% if loop.first %}
<button class="c-video-library__current-trigger js-video-library-play-self">
<span class="u-sr-only">Play {{ item.title }}</span>
<span class="c-video-library__current-icon" aria-hidden="true">
{% include "03-icons/play-large" %}
</span>
</button>
<div class="c-video-library__current-item-poster">
{{ item.videoPoster|raw }}
</div>
{% endif %}
{{ item.videoEmbed|raw }}
</div>
<div class="c-video-library__current-item-content">
<h3 class="c-video-library__current-item-title f-title--h4">{{ item.title }}</h3>
<p class="c-video-library__current-item-description f-text--reg">{{ item.description }}</p>
{% if item.tagLinks %}
<div class="c-video-library__current-item-tags">
{% for tag in item.tagLinks %}
{% include "04-objects/tag" with tag only %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="c-video-library__next o-col o-col-sm-4">
<ul class="c-video-library__items c-video-library__items--desktop">
{% for item in videos %}
<li class="c-video-library__item">
<button class="c-video-library__item-button js-video-library-play" data-idx="{{ loop.index }}" aria-label="Play {{ item.title }}"{% if loop.first %} disabled{% endif %}>
<span class="c-video-library__item-image">
{{ item.videoPoster|raw }}
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">{{ item.title }}</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon">{% include "03-icons/play-small" %}</span>
<span class="c-video-library__item-length-text">{{ item.videoDuration }}</span>
</span>
</span>
</button>
</li>
{% endfor %}
</ul>
<div class="c-video-library__items--mobile c-video-library__slider swiper-container">
<div class="c-video-library__items swiper-wrapper">
{% for item in videos %}
<div class="c-video-library__item swiper-slide">
<button class="c-video-library__item-button js-video-library-play" data-idx="{{ loop.index }}" aria-label="Play {{ item.title }}"{% if loop.first %} disabled{% endif %}>
<span class="c-video-library__item-image">
{{ item.videoPoster|raw }}
</span>
<span class="c-video-library__item-content">
<span class="c-video-library__item-title">{{ item.title }}</span>
<span class="c-video-library__item-playing">Now playing</span>
<span class="c-video-library__item-length">
<span class="c-video-library__item-icon">{% include "03-icons/play-small" %}</span>
<span class="c-video-library__item-length-text">{{ item.videoDuration }}</span>
</span>
</span>
</button>
</div>
{% endfor %}
</div>
</div>
{% if ctaLink %}
<div class="c-video-library__cta-wrapper">
<a href="{{ ctaLink }}" class="c-video-library__cta o-btn o-btn--expanding-arrow" target="blank" rel="noopener nofollow">
{% if ctaIcon %}<span class="c-video-library__cta-icon" aria-hidden="true">{% include "03-icons/social/youtube-small" %}</span>{% endif %}
{{ ctaTitle }}
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Video series title",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet.",
"ctaLink": "#",
"ctaTitle": "Explore More Videos",
"ctaIcon": true,
"videos": [
{
"title": "Spinosaurus delivery",
"description": "On June 26, 2019 a Spinosaurus was transported on flat bed truck from New Jersey, over the Ben Franklin Bridge, through the streets of Philadelphia to the Academy.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
],
"videoDuration": "05:21",
"videoEmbed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/nR96FYJkMj8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"videoPoster": "<img src=\"/images/video-library/1.jpg\" alt=\"\" />"
},
{
"title": "Drawn to Dinosaurs: An Interview with Artist Christopher DiPiazza",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
],
"videoDuration": "24:37",
"videoEmbed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/PrhxqTH3Sq8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"videoPoster": "<img src=\"/images/video-library/2.jpg\" alt=\"\" />"
},
{
"title": "What are Dioramas?",
"description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
],
"videoDuration": "06:28",
"videoEmbed": "<iframe src=https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fbusiness.facebook.com%2FAcademyofNaturalSciences%2Fvideos%2F885106555431745%2F&show_text=false&width=560&t=0 width=\"560\" height=\"314\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\" allowFullScreen=\"true\"></iframe>",
"videoPoster": "<img src=\"/images/video-library/3.jpg\" alt=\"\" />"
},
{
"title": "Academy Connection: Extreme Bugs",
"description": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
],
"videoDuration": "10:42",
"videoEmbed": "<iframe src=\"https://player.vimeo.com/video/124423728\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen></iframe>",
"videoPoster": "<img src=\"/images/video-library/4.jpg\" alt=\"\" />"
}
]
}
.c-video-library {
overflow: hidden;
margin: 6.4rem 0;
@include break($sm) {
margin: 12rem 0;
}
&[data-bkg-theme='light'] {
margin: 0;
padding: 6.4rem 0;
@include break($sm) {
margin: 0;
padding: 12rem 0;
}
}
}
.c-video-library__header {
margin-bottom: 3.2rem;
}
.c-video-library__description {
margin-top: 1rem;
}
.c-video-library__current-item {
display: none;
&.is-active {
display: block;
position: relative;
overflow: hidden;
}
}
.c-video-library__current-trigger {
position: absolute;
top: 50%;
left: 50%;
width: 8.6rem;
height: 8.6rem;
background-color: $c-white;
color: var(--ct-dark);
z-index: 2;
border-radius: 50%;
opacity: 0;
visibility: hidden;
transform: translate3d(-50%, -20%, 0);
transition: all 0.4s ease-in-out 0.2s;
.c-video-library__current-item.show-poster & {
opacity: 1;
visibility: visible;
transform: translate3d(-50%, -50%, 0);
}
}
.c-video-library__current-icon {
position: absolute;
top: 50%;
left: 51%;
transform: translate3d(-50%, -50%, 0);
svg {
display: block;
path {
fill: currentColor;
}
}
}
.c-video-library__current-item-poster {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-in-out;
transform: translate3d(-50%, -40%, 0);
.c-video-library__current-item.show-poster & {
opacity: 1;
visibility: visible;
transform: translate3d(-50%, -50%, 0);
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.c-video-library__current-item-embed {
position: relative;
&:after {
display: block;
content: '';
padding-top: 56.25%;
overflow: hidden;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.c-video-library__current-item-content {
margin-top: 1.6rem;
}
.c-video-library__current-item-description {
margin-top: 1rem;
}
.c-video-library__current-item-tags {
margin-top: 2.4rem;
a + a {
margin-left: 0.8rem;
}
}
.c-video-library__next {
margin-top: 3.2rem;
@include break($sm) {
display: flex;
flex-direction: column;
margin-top: 0;
}
}
.c-video-library__items--desktop {
display: none;
@include break($sm) {
display: block;
}
}
.c-video-library__items--mobile {
overflow: visible;
@include break($sm) {
display: none;
}
}
.c-video-library__item {
flex: 0 0 80%;
padding-right: 2.4rem;
@include break($xs) {
flex: 0 0 40%;
}
@include break($sm) {
flex: 0 0 100%;
padding-right: 0;
}
& + & {
@include break($sm) {
margin-top: 2rem;
}
}
}
.c-video-library__item-button {
font-size: 1.3rem;
line-height: 1.3;
font-variant-numeric: tabular-nums;
transition: opacity 0.3s ease-in-out;
@include break($sm) {
display: flex;
}
&:disabled {
opacity: 0.75;
}
}
.c-video-library__item-image {
margin-bottom: 1.8rem;
display: block;
@include break($sm) {
flex: 0 0 33%;
margin-bottom: 0;
}
}
.c-video-library__item-content {
display: block;
@include break($sm) {
flex: 0 0 67%;
padding-left: 2rem;
display: flex;
flex-direction: column;
}
}
.c-video-library__item-title {
font-weight: $f-bold;
margin-bottom: 0.8rem;
}
.c-video-library__item-playing {
font-weight: $f-light;
flex-grow: 1;
display: none;
.c-video-library__item-button:disabled & {
display: block;
}
}
.c-video-library__item-length {
display: flex;
align-items: center;
justify-self: flex-end;
flex-grow: 1;
.c-video-library__item-button:disabled & {
display: none;
}
}
.c-video-library__item-icon {
margin-right: 1.2rem;
svg {
display: block;
}
path {
fill: var(--ct-txt);
}
}
.c-video-library__cta-wrapper {
flex-grow: 1;
display: flex;
align-items: flex-start;
padding-top: 2rem;
svg {
display: block;
path {
fill: var(--ct-txt);
}
}
}
.c-video-library__cta {
border-bottom: 0.1rem solid var(--ct-txt);
width: 100%;
padding-bottom: 2rem;
margin-top: 9.6rem;
@include break($sm){
margin-top: 4.3rem;
}
}
.c-video-library__cta-icon {
margin-right: 1.2rem;
}
.c-video-library__current-item-content .f-text--reg {
@include break($sm) {
font-size: 1.7rem;
}
}
No notes defined.