.component-title-cta-images-and-caption__adv-videos{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}


.component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset:first-child, 
.component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset__adv-videos:first-child {
    flex: 0 0 100%;
    max-width: 100%;

    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    border-radius: 6px;
    transition: outline-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.page-adv--component-wrapper-video, .page-adv--component-wrapper-video__adv-videos{
    max-width:100%;
}

.component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset:not(:first-child),
.component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset__adv-videos:not(:first-child) {
    flex: 1 1 calc(33.333% - 5px);  
    max-width: calc(33.333% - 5px);

    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset:not(:first-child):hover,
.component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset__adv-videos:not(:first-child):hover {
  transform: translateY(-0.25rem);
}

.page-adv--wrapper-asset:focus, .page-adv--wrapper-asset__adv-videos:focus {
  outline-offset: 2px;
}

.page-adv--wrapper-asset, .page-adv--wrapper-asset__adv-videos {
  transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease, opacity .2s ease;
  position: relative;
  cursor: pointer;

}

.video-overlay-hint {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity .25s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
}

.page-adv--wrapper-asset:hover .video-overlay-hint, .page-adv--wrapper-asset__adv-videos:hover .video-overlay-hint {
    opacity: 1;
}

.video-overlay-hint::after {
    content: "";
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    mask: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="8,5 19,12 8,19"/></svg>') center/55% no-repeat;
}


.page-adv--wrapper-asset.is-playing .video-overlay-hint::after, .page-adv--wrapper-asset__adv-videos.is-playing .video-overlay-hint::after {
    mask: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>') center/55% no-repeat;
}


@media (max-width: 600px) {
    .component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset,
    .component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset:not(:first-child),
    .component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset__adv-videos,
    .component-title-cta-images-and-caption__adv-videos > .page-adv--wrapper-asset__adv-videos:not(:first-child) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}



/* MEDIUM MOBILE 381px */
@media screen and (min-width: 23.813rem) {

}

/* LARGE MOBILE 481px */
@media screen and (min-width: 30.063rem) {

}

/* TABLET 641px */
@media screen and (min-width: 40.063rem) {

}


/* TABLET 768px */
@media screen and (min-width: 48rem) {/* 768px */

}

@media screen and (min-width: 64rem) {/* 1024px */


}

@media screen and (min-width: 67.5rem) { /* 1080px */


}

@media screen and (min-width: 75rem) { /* 1200px */


}

/* BIG DESKTOP */
@media screen and (min-width: 84rem) {/* 1344px */


}