.motiongrid {
--motiongrid-columns-desktop: 3;
--motiongrid-columns-tablet: 2;
--motiongrid-columns-mobile: 1;
--motiongrid-gap: 24px;
--motiongrid-aspect-ratio: auto;
box-sizing: border-box;
overflow-anchor: none;
width: 100%;
}
.motiongrid *,
.motiongrid *::before,
.motiongrid *::after {
box-sizing: border-box;
}
.motiongrid__filters {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
margin: 0 0 var(--motiongrid-gap);
}
.motiongrid--filter-align-center .motiongrid__filters {
justify-content: center;
}
.motiongrid--filter-align-right .motiongrid__filters {
justify-content: flex-end;
}
.motiongrid__filter-button {
background: var(--motiongrid-filter-background, #f5f7f8);
border: 1px solid var(--motiongrid-filter-border-color, #ccd5da);
border-radius: 6px;
color: var(--motiongrid-filter-color, #172026);
cursor: pointer;
font: inherit;
line-height: 1.2;
padding: 8px 12px;
}
.motiongrid--filter-style-textlink .motiongrid__filter-button {
background: transparent;
border-color: transparent;
border-radius: 0;
color: #172026;
padding: 4px 0;
}
.motiongrid--filter-style-textlink .motiongrid__filters {
gap: 16px;
}
.motiongrid--filter-style-pill .motiongrid__filter-button {
border-radius: 999px;
padding: 8px 14px;
}
.motiongrid__filter-button:hover,
.motiongrid__filter-button:focus-visible {
background: var(--motiongrid-filter-hover-background, var(--motiongrid-filter-active-background, #172026));
border-color: var(--motiongrid-filter-hover-background, var(--motiongrid-filter-active-background, #172026));
color: var(--motiongrid-filter-hover-color, var(--motiongrid-filter-active-color, #fff));
outline: 2px solid transparent;
}
.motiongrid__filter-button.is-active {
background: var(--motiongrid-filter-active-background, #172026);
border-color: var(--motiongrid-filter-active-background, #172026);
color: var(--motiongrid-filter-active-color, #fff);
outline: 2px solid transparent;
}
.motiongrid--filter-style-textlink .motiongrid__filter-button:hover,
.motiongrid--filter-style-textlink .motiongrid__filter-button:focus-visible,
.motiongrid--filter-style-textlink .motiongrid__filter-button.is-active {
background: transparent;
border-color: transparent;
color: #172026;
text-decoration: underline;
text-underline-offset: 4px;
}
.motiongrid__filter-button:focus-visible {
box-shadow: 0 0 0 3px rgba(36, 123, 160, 0.28);
}
.motiongrid__items {
display: grid;
overflow-anchor: none;
gap: var(--motiongrid-gap);
grid-template-columns: repeat(var(--motiongrid-columns-desktop), minmax(0, 1fr));
margin: 0;
padding: 0;
transition: opacity var(--motiongrid-filter-duration, 320ms) cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity;
}
.motiongrid[data-motiongrid-ready="0"] .motiongrid__items,
.motiongrid[data-motiongrid-ready="0"] .motiongrid__empty,
.motiongrid[data-motiongrid-ready="0"] .motiongrid__load-more-wrap {
overflow-anchor: none;
opacity: 0;
pointer-events: none;
transition: none;
visibility: hidden;
}
.motiongrid-filter-exit {
pointer-events: none;
}
.motiongrid-is-height-reserved {
overflow-anchor: none;
}
.motiongrid-filter-exit:not(.motiongrid-filter-exit-sequence) .motiongrid__items {
opacity: 0;
}
.motiongrid-filter-exit-sequence .motiongrid__items {
opacity: 1;
transition: none;
}
.motiongrid-filter-prepare .motiongrid__items {
opacity: 0;
transition: none;
}
.motiongrid-filter-enter .motiongrid__items {
opacity: 1;
transition: none;
}
.motiongrid--layout-masonry .motiongrid__items {
column-gap: var(--motiongrid-gap);
display: grid;
grid-auto-flow: row;
grid-auto-rows: 0.25px;
grid-template-columns: repeat(var(--motiongrid-columns-desktop), minmax(0, 1fr));
margin-bottom: calc(var(--motiongrid-gap) * -1);
row-gap: 0;
}
.motiongrid--layout-masonry .motiongrid__items[data-motiongrid-masonry-positioned="1"] {
display: block;
margin-bottom: 0;
position: relative;
}
.motiongrid .motiongrid__item,
.motiongrid article.motiongrid__item,
.motiongrid .motiongrid__item.post,
.motiongrid .motiongrid__item.hentry,
.motiongrid .motiongrid__item.entry {
box-sizing: border-box;
margin: 0 !important;
margin-block: 0 !important;
margin-inline: 0 !important;
max-width: 100%;
min-width: 0;
padding: 0 !important;
padding-block: 0 !important;
padding-inline: 0 !important;
width: 100%;
}
.motiongrid--layout-masonry .motiongrid__item {
align-self: start;
break-inside: avoid;
}
.motiongrid--layout-masonry .motiongrid__items[data-motiongrid-masonry-positioned="1"] .motiongrid__item {
position: absolute;
}
.motiongrid--layout-masonry .motiongrid__card {
height: auto;
}
.motiongrid--layout-masonry .motiongrid__item--wide,
.motiongrid--layout-masonry .motiongrid__item--banner,
.motiongrid--layout-masonry .motiongrid__item--large,
.motiongrid--layout-masonry .motiongrid__item--spotlight {
grid-column: span 2;
}
.motiongrid--layout-justified .motiongrid__items {
display: grid;
grid-auto-flow: dense;
grid-auto-rows: var(--motiongrid-justified-row-height-desktop, 220px);
grid-template-columns: repeat(var(--motiongrid-justified-tracks-desktop), minmax(0, 1fr));
}
.motiongrid--layout-justified .motiongrid__item {
grid-column: span 2;
min-height: 0;
}
.motiongrid--layout-justified .motiongrid__item--compact,
.motiongrid--layout-justified .motiongrid__item--tall,
.motiongrid--layout-justified .motiongrid__item--reel_9_16 {
grid-column: span 1;
}
.motiongrid--layout-justified .motiongrid__item--wide,
.motiongrid--layout-justified .motiongrid__item--large {
grid-column: span 4;
}
.motiongrid--layout-justified .motiongrid__item--banner,
.motiongrid--layout-justified .motiongrid__item--spotlight {
grid-column: span 6;
}
.motiongrid--layout-justified .motiongrid__item--large,
.motiongrid--layout-justified .motiongrid__item--spotlight {
grid-row: span 2;
}
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+1),
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+5) {
grid-column: span 4;
}
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+3) {
grid-column: span 1;
}
.motiongrid--layout-justified .motiongrid__card,
.motiongrid--layout-justified .motiongrid__media {
height: 100%;
min-height: 0;
}
.motiongrid--layout-justified .motiongrid__media {
aspect-ratio: auto;
}
.motiongrid--layout-metro .motiongrid__items {
display: grid;
grid-auto-flow: dense;
grid-auto-rows: var(--motiongrid-metro-cell-size-desktop, 180px);
grid-template-columns: repeat(var(--motiongrid-columns-desktop), minmax(0, 1fr));
}
.motiongrid--layout-metro .motiongrid__item {
min-height: 0;
}
.motiongrid--layout-metro .motiongrid__item--wide,
.motiongrid--layout-metro .motiongrid__item--banner,
.motiongrid--layout-metro .motiongrid__item--large,
.motiongrid--layout-metro .motiongrid__item--spotlight {
grid-column: span 2;
}
.motiongrid--layout-metro .motiongrid__item--tall,
.motiongrid--layout-metro .motiongrid__item--reel_9_16,
.motiongrid--layout-metro .motiongrid__item--large,
.motiongrid--layout-metro .motiongrid__item--spotlight {
grid-row: span 2;
}
.motiongrid--layout-metro .motiongrid__item--compact {
grid-column: span 1;
grid-row: span 1;
}
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+1) {
grid-column: span 2;
grid-row: span 2;
}
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+4) {
grid-column: span 2;
}
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+6) {
grid-row: span 2;
}
.motiongrid--layout-metro.motiongrid--metro-density-compact .motiongrid__item--auto-share:nth-child(8n+1) {
grid-row: span 1;
}
.motiongrid--layout-metro.motiongrid--metro-density-compact .motiongrid__item--auto-share:nth-child(8n+6) {
grid-column: span 2;
grid-row: span 1;
}
.motiongrid--layout-metro.motiongrid--metro-density-feature .motiongrid__item--auto-share:nth-child(10n+1),
.motiongrid--layout-metro.motiongrid--metro-density-feature .motiongrid__item--auto-share:nth-child(10n+7) {
grid-column: span 2;
grid-row: span 2;
}
.motiongrid--layout-metro .motiongrid__card,
.motiongrid--layout-metro .motiongrid__media {
height: 100%;
min-height: 0;
}
.motiongrid--layout-metro .motiongrid__media {
aspect-ratio: auto;
}
.motiongrid-is-layout-locked .motiongrid__items {
overflow: clip;
}
.motiongrid--layout-masonry.motiongrid-masonry-preparing .motiongrid__items {
opacity: 0;
pointer-events: none;
transition: none;
visibility: hidden;
}
.motiongrid__item[hidden] {
display: none;
}
.motiongrid-card-pre-enter {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.motiongrid-card-enter {
opacity: 0;
transform: none;
will-change: opacity;
}
.motiongrid-card-enter > .motiongrid__card {
clip-path: none;
filter: none;
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
.motiongrid-card-enter-active {
opacity: 1;
transition: opacity var(--motiongrid-duration, 920ms) cubic-bezier(0.22, 1, 0.36, 1) var(--motiongrid-delay, 0ms);
visibility: visible;
}
.motiongrid-card-enter-active > .motiongrid__card {
clip-path: none;
filter: none;
opacity: 1;
transform: none;
}
.motiongrid-card-exit {
opacity: 1;
will-change: opacity;
}
.motiongrid-card-exit-active {
opacity: 0;
transition: opacity var(--motiongrid-duration, 320ms) cubic-bezier(0.32, 0, 0.67, 0) var(--motiongrid-delay, 0ms);
}
.motiongrid-card-exit > .motiongrid__card,
.motiongrid-card-exit-active > .motiongrid__card,
.motiongrid--layout-masonry .motiongrid-card-exit > .motiongrid__card,
.motiongrid--layout-masonry .motiongrid-card-exit-active > .motiongrid__card {
clip-path: none;
filter: none;
transform: none;
}
.motiongrid[data-motiongrid-motion-current-style="soft_fade"] .motiongrid-card-enter-active {
transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.motiongrid[data-motiongrid-motion-current-style="lift_fade"] .motiongrid-card-enter > .motiongrid__card {
clip-path: none;
opacity: 0.98;
transform: translate3d(0, 18px, 0);
will-change: transform, opacity;
}
.motiongrid[data-motiongrid-motion-current-style="lift_fade"] .motiongrid-card-enter-active > .motiongrid__card {
transition:
transform var(--motiongrid-duration, 920ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motiongrid-delay, 0ms),
opacity var(--motiongrid-duration, 920ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motiongrid-delay, 0ms);
}
.motiongrid[data-motiongrid-motion-current-style="linear_sequence"] .motiongrid-card-enter-active {
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.motiongrid[data-motiongrid-motion-current-style="random_sparkle"] .motiongrid-card-enter > .motiongrid__card {
clip-path: none;
filter: brightness(1.08) saturate(1.05);
opacity: 0.96;
transform: scale(0.985);
will-change: transform, filter, opacity;
}
.motiongrid[data-motiongrid-motion-current-style="random_sparkle"] .motiongrid-card-enter-active {
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.motiongrid[data-motiongrid-motion-current-style="random_sparkle"] .motiongrid-card-enter-active > .motiongrid__card {
transition:
transform var(--motiongrid-duration, 920ms) cubic-bezier(0.16, 1, 0.3, 1) var(--motiongrid-delay, 0ms),
filter var(--motiongrid-duration, 920ms) ease-out var(--motiongrid-delay, 0ms),
opacity var(--motiongrid-duration, 920ms) ease-out var(--motiongrid-delay, 0ms);
}
.motiongrid--layout-masonry .motiongrid-card-enter > .motiongrid__card,
.motiongrid--layout-masonry .motiongrid-card-enter-active > .motiongrid__card {
transform: none;
}
.motiongrid[data-motiongrid-motion-phase="load_more"][data-motiongrid-motion-current-style="random_sparkle"] .motiongrid-card-enter > .motiongrid__card,
.motiongrid[data-motiongrid-motion-phase="load_more"][data-motiongrid-motion-current-style="random_sparkle"] .motiongrid-card-enter-active > .motiongrid__card {
filter: none;
transform: none;
transition: none;
will-change: auto;
}
.motiongrid[data-motiongrid-motion-phase="load_more"] .motiongrid-card-enter > .motiongrid__card {
clip-path: none;
}
.motiongrid-card-new-start > .motiongrid__card {
box-shadow: 0 0 0 3px rgba(36, 123, 160, 0.28), 0 18px 42px rgba(23, 32, 38, 0.18);
transition: box-shadow 720ms ease-out;
}
.motiongrid__card {
background: var(--motiongrid-card-background, #e8ecef);
border: var(--motiongrid-card-border-width, 0) solid var(--motiongrid-card-border-color, transparent);
border-radius: var(--motiongrid-card-radius-desktop, var(--motiongrid-card-radius, 0));
box-shadow: var(--motiongrid-card-shadow, none);
color: inherit;
cursor: pointer;
display: block;
font: inherit;
max-width: 100%;
min-width: 0;
overflow: hidden;
padding: 0;
position: relative;
text-align: left;
text-decoration: none;
width: 100%;
}
.motiongrid .motiongrid__card,
.motiongrid .motiongrid__media,
.motiongrid .motiongrid__media-element,
.motiongrid .motiongrid__lottie,
.motiongrid .motiongrid__placeholder,
.motiongrid .motiongrid__card figure,
.motiongrid figure.motiongrid__media,
.motiongrid .motiongrid__media figure {
margin: 0 !important;
padding: 0 !important;
}
div.motiongrid__card {
cursor: default;
}
.motiongrid__card:focus-visible {
box-shadow: 0 0 0 3px rgba(36, 123, 160, 0.35);
outline: 2px solid #247ba0;
outline-offset: 3px;
}
.motiongrid__media {
aspect-ratio: var(--motiongrid-aspect-ratio);
contain: paint;
background: #dce3e7;
border-radius: inherit;
display: block;
min-height: 120px;
overflow: hidden;
position: relative;
width: 100%;
}
.motiongrid__media-element[data-motiongrid-video] {
aspect-ratio: var(--motiongrid-video-aspect-ratio, auto);
}
.motiongrid--layout-masonry .motiongrid__item--compact .motiongrid__media {
aspect-ratio: 4 / 3;
}
.motiongrid--layout-masonry .motiongrid__item--tall .motiongrid__media {
aspect-ratio: 4 / 5;
}
.motiongrid--layout-masonry .motiongrid__item--reel_9_16 .motiongrid__media {
aspect-ratio: 9 / 16;
}
.motiongrid--layout-masonry .motiongrid__item--wide .motiongrid__media {
aspect-ratio: 16 / 9;
}
.motiongrid--layout-masonry .motiongrid__item--banner .motiongrid__media {
aspect-ratio: 21 / 9;
}
.motiongrid--layout-masonry .motiongrid__item--large .motiongrid__media {
aspect-ratio: 1 / 1;
}
.motiongrid--layout-masonry .motiongrid__item--spotlight .motiongrid__media {
aspect-ratio: 4 / 3;
}
.motiongrid__media-element,
.motiongrid__lottie,
.motiongrid__placeholder {
display: block;
height: 100%;
max-height: 100%;
max-width: 100%;
min-width: 0;
object-fit: cover;
object-position: var(--motiongrid-media-object-position, center center);
width: 100%;
}
.motiongrid__lottie {
position: relative;
}
.motiongrid__lottie svg,
.motiongrid__lottie canvas {
display: block;
height: 100%;
width: 100%;
}
.motiongrid__lottie-fallback {
display: block;
height: 100%;
object-fit: cover;
object-position: var(--motiongrid-media-object-position, center center);
width: 100%;
}
.motiongrid__placeholder {
background:
linear-gradient(135deg, rgba(23, 32, 38, 0.08) 25%, transparent 25%) 0 0 / 24px 24px,
linear-gradient(135deg, transparent 75%, rgba(23, 32, 38, 0.08) 75%) 0 0 / 24px 24px,
#eef2f4;
}
.motiongrid__overlay {
align-items: var(--motiongrid-overlay-align-items, flex-start);
background: linear-gradient(180deg, transparent 0%, var(--motiongrid-overlay-background, rgba(0, 0, 0, 0.74)) 100%);
bottom: 0;
color: var(--motiongrid-overlay-text-color, #fff);
display: flex;
flex-direction: column;
gap: 4px;
justify-content: var(--motiongrid-overlay-justify-content, flex-end);
left: 0;
min-height: var(--motiongrid-overlay-min-height, 50%);
opacity: 0;
padding: var(--motiongrid-overlay-padding-desktop, var(--motiongrid-overlay-padding, 56px 18px 18px));
position: absolute;
pointer-events: none;
right: 0;
text-align: var(--motiongrid-overlay-text-align, left);
transform: translateY(8px);
transition: opacity 180ms ease, transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
.motiongrid__card:hover .motiongrid__overlay {
opacity: 1;
transform: translateY(0);
}
}
.motiongrid--card-style-overlay_fade .motiongrid__overlay {
background: var(--motiongrid-overlay-background, rgba(0, 0, 0, 0.56));
min-height: 100%;
padding-top: 18px;
}
@media (hover: hover) and (pointer: fine) {
.motiongrid--card-style-overlay_fade .motiongrid__card:hover .motiongrid__overlay {
background: var(--motiongrid-overlay-background, rgba(0, 0, 0, 0.68));
}
}
.motiongrid--card-style-title_below .motiongrid__card {
background: var(--motiongrid-card-background, transparent);
overflow: visible;
}
.motiongrid--card-style-title_below .motiongrid__media {
border-radius: var(--motiongrid-card-radius-desktop, var(--motiongrid-card-radius, 0));
}
.motiongrid--card-style-title_below .motiongrid__overlay {
background: transparent;
color: var(--motiongrid-overlay-text-color, inherit);
min-height: 0;
opacity: 1;
padding: 12px 0 0;
position: static;
transform: none;
}
.motiongrid--card-style-title_below .motiongrid__terms,
.motiongrid--card-style-title_below .motiongrid__subtitle {
opacity: 0.72;
}
.motiongrid--card-style-minimal .motiongrid__overlay {
display: none;
}
.motiongrid--card-style-minimal .motiongrid__card {
background: transparent;
}
.motiongrid__title {
color: var(--motiongrid-overlay-title-color, currentColor);
font-size: var(--motiongrid-overlay-title-font-size-desktop, 1rem);
font-weight: var(--motiongrid-overlay-title-font-weight, 700);
line-height: 1.25;
max-width: 100%;
width: 100%;
}
.motiongrid__subtitle,
.motiongrid__terms {
line-height: 1.35;
max-width: 100%;
opacity: 0.88;
width: 100%;
}
.motiongrid__subtitle {
color: var(--motiongrid-overlay-subtitle-color, currentColor);
font-size: var(--motiongrid-overlay-subtitle-font-size-desktop, 0.875rem);
}
.motiongrid__terms {
color: var(--motiongrid-overlay-category-color, currentColor);
font-size: var(--motiongrid-overlay-category-font-size-desktop, 0.875rem);
}
.motiongrid--category-style-badge .motiongrid__terms {
align-self: auto;
background: var(--motiongrid-overlay-category-background, rgba(255, 255, 255, 0.18));
border-radius: 999px;
display: inline-flex;
max-width: 100%;
padding: 4px 9px;
width: auto;
}
.motiongrid__play-indicator {
border-bottom: 9px solid transparent;
border-left: 14px solid currentColor;
border-top: 9px solid transparent;
height: 0;
margin-top: 8px;
width: 0;
}
.motiongrid__empty {
background: #f5f7f8;
border: 1px solid #dde4e8;
color: #4a5963;
margin: var(--motiongrid-gap) 0 0;
padding: 16px;
text-align: center;
}
.motiongrid__load-more-wrap {
overflow-anchor: none;
align-items: center;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: var(--motiongrid-gap);
}
.motiongrid-is-filter-request .motiongrid__load-more-wrap,
.motiongrid-is-filter-request .motiongrid__status {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.motiongrid__load-more {
background: var(--motiongrid-load-more-background, #172026);
border: 1px solid var(--motiongrid-load-more-background, #172026);
border-radius: 6px;
color: var(--motiongrid-load-more-color, #fff);
cursor: pointer;
font: inherit;
line-height: 1.2;
min-height: 42px;
padding: 10px 18px;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.motiongrid__load-more:hover,
.motiongrid__load-more:focus-visible {
background: var(--motiongrid-load-more-hover-background, #247ba0);
border-color: var(--motiongrid-load-more-hover-background, #247ba0);
color: var(--motiongrid-load-more-hover-color, var(--motiongrid-load-more-color, #fff));
outline: 2px solid transparent;
}
.motiongrid__load-more:focus-visible {
box-shadow: 0 0 0 3px rgba(36, 123, 160, 0.28);
}
.motiongrid__load-more:disabled {
background: #dce3e7;
border-color: #dce3e7;
color: #62717b;
cursor: not-allowed;
}
.motiongrid__load-more.is-loading,
.motiongrid__load-more.is-loading:disabled {
background: #2f3a41;
border-color: #2f3a41;
color: #fff;
cursor: progress;
}
.motiongrid__status {
color: #62717b;
font-size: 0.875rem;
min-height: 1.2em;
}
.motiongrid-lightbox {
align-items: center;
background: var(--motiongrid-lightbox-overlay-background, rgba(10, 14, 17, 0.82));
display: none;
inset: 0;
justify-content: center;
padding: 24px;
position: fixed;
z-index: 99999;
}
.motiongrid-lightbox.is-open {
display: flex;
}
.motiongrid-lightbox.is-loading .motiongrid-lightbox__dialog::before {
animation: motiongrid-spin 900ms linear infinite;
background: transparent;
border: 3px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
border-top-color: #fff;
content: "";
height: 36px;
left: 50%;
margin: -18px 0 0 -18px;
position: absolute;
top: 50%;
width: 36px;
z-index: 2;
}
@keyframes motiongrid-spin {
to {
transform: rotate(360deg);
}
}
.motiongrid-lightbox__dialog {
max-width: min(960px, 100%);
position: relative;
width: 100%;
}
.motiongrid-lightbox__meta {
color: #fff;
display: grid;
gap: 5px;
margin: 0 0 14px;
text-align: left;
}
.motiongrid-lightbox__meta[hidden],
.motiongrid-lightbox__title[hidden],
.motiongrid-lightbox__subtitle[hidden],
.motiongrid-lightbox__terms[hidden] {
display: none;
}
.motiongrid-lightbox__title {
font-size: clamp(1.25rem, 2vw, 2rem);
line-height: 1.18;
margin: 0;
}
.motiongrid-lightbox__subtitle,
.motiongrid-lightbox__terms {
color: rgba(255, 255, 255, 0.78);
font-size: 0.9375rem;
line-height: 1.45;
margin: 0;
}
.motiongrid-lightbox__terms {
font-size: 0.8125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.motiongrid-lightbox__video {
background: #000;
display: block;
max-height: 82vh;
width: 100%;
}
.motiongrid-lightbox__video[hidden],
.motiongrid-lightbox__youtube[hidden],
.motiongrid-lightbox__consent[hidden] {
display: none;
}
.motiongrid-lightbox__youtube {
background: #000;
aspect-ratio: 16 / 9;
width: 100%;
}
.motiongrid-lightbox__youtube iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
.motiongrid-lightbox__consent {
background: #101820;
color: #fff;
display: grid;
gap: 14px;
padding: 28px;
text-align: center;
}
.motiongrid-lightbox__consent p {
margin: 0;
}
.motiongrid-lightbox__consent button {
background: #fff;
border: 1px solid #fff;
border-radius: 6px;
color: #101820;
cursor: pointer;
font: inherit;
padding: 10px 14px;
}
.motiongrid-lightbox__consent button + button {
background: transparent;
color: #fff;
}
.motiongrid-lightbox__youtube-reset {
align-self: center;
appearance: none;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
font: inherit;
font-size: 0.875rem;
margin-top: 0.875rem;
padding: 0;
text-decoration: underline;
text-underline-offset: 0.18em;
}
.motiongrid-lightbox__youtube-reset[hidden] {
display: none;
}
.motiongrid-lightbox__youtube-reset:hover,
.motiongrid-lightbox__youtube-reset:focus-visible {
color: #ffffff;
}
.motiongrid-lightbox__close {
align-items: center;
background: #fff;
border: 0;
border-radius: 999px;
color: #111;
cursor: pointer;
display: flex;
font-size: 24px;
height: 40px;
justify-content: center;
line-height: 1;
position: absolute;
right: -12px;
top: -12px;
width: 40px;
}
.motiongrid-lightbox__close:focus-visible {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.42);
outline: 2px solid #247ba0;
}
body.motiongrid-lightbox-open {
overflow: hidden;
}
@media (hover: none) {
.motiongrid--mobile-overlay-always .motiongrid__overlay {
opacity: 1;
transform: none;
}
.motiongrid--mobile-overlay-tap .motiongrid__item.is-mobile-overlay-active .motiongrid__overlay {
opacity: 1;
transform: none;
}
}
@media (max-width: 900px) {
.motiongrid__card,
.motiongrid--card-style-title_below .motiongrid__media {
border-radius: var(--motiongrid-card-radius-tablet, var(--motiongrid-card-radius-desktop, var(--motiongrid-card-radius, 0)));
}
.motiongrid__items {
grid-template-columns: repeat(var(--motiongrid-columns-tablet), minmax(0, 1fr));
}
.motiongrid--layout-masonry .motiongrid__items {
grid-template-columns: repeat(var(--motiongrid-columns-tablet), minmax(0, 1fr));
}
.motiongrid--layout-justified .motiongrid__items {
grid-auto-rows: var(--motiongrid-justified-row-height-tablet, 190px);
grid-template-columns: repeat(var(--motiongrid-justified-tracks-tablet), minmax(0, 1fr));
}
.motiongrid--layout-metro .motiongrid__items {
grid-auto-rows: var(--motiongrid-metro-cell-size-tablet, 170px);
grid-template-columns: repeat(var(--motiongrid-columns-tablet), minmax(0, 1fr));
}
.motiongrid--layout-masonry .motiongrid__item--wide {
grid-column: span 1;
}
.motiongrid--layout-masonry .motiongrid__item--banner,
.motiongrid--layout-masonry .motiongrid__item--large,
.motiongrid--layout-masonry .motiongrid__item--spotlight {
grid-column: span 2;
}
.motiongrid--layout-justified .motiongrid__item--compact,
.motiongrid--layout-justified .motiongrid__item--tall,
.motiongrid--layout-justified .motiongrid__item--reel_9_16 {
grid-column: span 1;
}
.motiongrid--layout-justified .motiongrid__item--wide,
.motiongrid--layout-justified .motiongrid__item--large,
.motiongrid--layout-justified .motiongrid__item--banner,
.motiongrid--layout-justified .motiongrid__item--spotlight,
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+1),
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+5),
.motiongrid--layout-metro .motiongrid__item--wide,
.motiongrid--layout-metro .motiongrid__item--banner,
.motiongrid--layout-metro .motiongrid__item--large,
.motiongrid--layout-metro .motiongrid__item--spotlight,
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+1),
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+4) {
grid-column: span 2;
}
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+6) {
grid-row: span 2;
}
.motiongrid--layout-metro.motiongrid--metro-density-feature .motiongrid__item--auto-share:nth-child(10n+1),
.motiongrid--layout-metro.motiongrid--metro-density-feature .motiongrid__item--auto-share:nth-child(10n+7) {
grid-column: span 2;
grid-row: span 2;
}
.motiongrid__overlay {
padding: var(--motiongrid-overlay-padding-tablet, var(--motiongrid-overlay-padding-desktop, var(--motiongrid-overlay-padding, 56px 18px 18px)));
}
.motiongrid__title {
font-size: var(--motiongrid-overlay-title-font-size-tablet, var(--motiongrid-overlay-title-font-size-desktop, 1rem));
}
.motiongrid__subtitle {
font-size: var(--motiongrid-overlay-subtitle-font-size-tablet, var(--motiongrid-overlay-subtitle-font-size-desktop, 0.875rem));
}
.motiongrid__terms {
font-size: var(--motiongrid-overlay-category-font-size-tablet, var(--motiongrid-overlay-category-font-size-desktop, 0.875rem));
}
}
@media (max-width: 600px) {
.motiongrid__card,
.motiongrid--card-style-title_below .motiongrid__media {
border-radius: var(--motiongrid-card-radius-mobile, var(--motiongrid-card-radius-tablet, var(--motiongrid-card-radius-desktop, var(--motiongrid-card-radius, 0))));
}
.motiongrid__items {
grid-template-columns: repeat(var(--motiongrid-columns-mobile), minmax(0, 1fr));
}
.motiongrid--layout-masonry .motiongrid__items {
grid-template-columns: repeat(var(--motiongrid-columns-mobile), minmax(0, 1fr));
}
.motiongrid--layout-justified .motiongrid__items {
grid-auto-rows: var(--motiongrid-justified-row-height-mobile, 220px);
grid-template-columns: repeat(var(--motiongrid-justified-tracks-mobile), minmax(0, 1fr));
}
.motiongrid--layout-metro .motiongrid__items {
grid-auto-rows: var(--motiongrid-metro-cell-size-mobile, 220px);
grid-template-columns: repeat(var(--motiongrid-columns-mobile), minmax(0, 1fr));
}
.motiongrid--layout-justified .motiongrid__item,
.motiongrid--layout-justified .motiongrid__item--compact,
.motiongrid--layout-justified .motiongrid__item--tall,
.motiongrid--layout-justified .motiongrid__item--reel_9_16,
.motiongrid--layout-justified .motiongrid__item--wide,
.motiongrid--layout-justified .motiongrid__item--banner,
.motiongrid--layout-justified .motiongrid__item--large,
.motiongrid--layout-justified .motiongrid__item--spotlight,
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+1),
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+3),
.motiongrid--layout-justified .motiongrid__item--auto-share:nth-child(6n+5) {
grid-column: span 2;
}
.motiongrid--layout-justified .motiongrid__item--large,
.motiongrid--layout-justified .motiongrid__item--spotlight {
grid-row: span 1;
}
.motiongrid--layout-metro .motiongrid__item--wide,
.motiongrid--layout-metro .motiongrid__item--banner,
.motiongrid--layout-metro .motiongrid__item--large,
.motiongrid--layout-metro .motiongrid__item--spotlight,
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+1),
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+4) {
grid-column: span 1;
}
.motiongrid--layout-metro .motiongrid__item--tall,
.motiongrid--layout-metro .motiongrid__item--reel_9_16,
.motiongrid--layout-metro .motiongrid__item--large,
.motiongrid--layout-metro .motiongrid__item--spotlight,
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+1),
.motiongrid--layout-metro .motiongrid__item--auto-share:nth-child(8n+6),
.motiongrid--layout-metro.motiongrid--metro-density-feature .motiongrid__item--auto-share:nth-child(10n+1),
.motiongrid--layout-metro.motiongrid--metro-density-feature .motiongrid__item--auto-share:nth-child(10n+7) {
grid-row: span 1;
}
.motiongrid__overlay {
padding: var(--motiongrid-overlay-padding-mobile, var(--motiongrid-overlay-padding-tablet, var(--motiongrid-overlay-padding-desktop, var(--motiongrid-overlay-padding, 42px 14px 14px))));
}
.motiongrid__title {
font-size: var(--motiongrid-overlay-title-font-size-mobile, var(--motiongrid-overlay-title-font-size-tablet, var(--motiongrid-overlay-title-font-size-desktop, 1rem)));
}
.motiongrid__subtitle {
font-size: var(--motiongrid-overlay-subtitle-font-size-mobile, var(--motiongrid-overlay-subtitle-font-size-tablet, var(--motiongrid-overlay-subtitle-font-size-desktop, 0.875rem)));
}
.motiongrid__terms {
font-size: var(--motiongrid-overlay-category-font-size-mobile, var(--motiongrid-overlay-category-font-size-tablet, var(--motiongrid-overlay-category-font-size-desktop, 0.875rem)));
}
.motiongrid-lightbox {
padding: 12px;
}
.motiongrid-lightbox__close {
right: 8px;
top: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.motiongrid__items,
.motiongrid-card-enter > .motiongrid__card,
.motiongrid-card-enter-active,
.motiongrid-card-enter-active > .motiongrid__card,
.motiongrid-card-exit,
.motiongrid-card-exit-active,
.motiongrid-card-exit > .motiongrid__card,
.motiongrid-card-exit-active > .motiongrid__card,
.motiongrid-card-new-start > .motiongrid__card,
.motiongrid__overlay,
.motiongrid__load-more {
transition: none;
}
.motiongrid-filter-exit .motiongrid__items,
.motiongrid-filter-prepare .motiongrid__items,
.motiongrid-filter-enter .motiongrid__items,
.motiongrid-card-pre-enter,
.motiongrid-card-enter,
.motiongrid-card-enter > .motiongrid__card,
.motiongrid-card-enter-active > .motiongrid__card,
.motiongrid-card-exit,
.motiongrid-card-exit-active,
.motiongrid-card-exit > .motiongrid__card,
.motiongrid-card-exit-active > .motiongrid__card {
clip-path: none;
filter: none;
opacity: 1;
transform: none;
visibility: visible;
}
.motiongrid-lightbox.is-loading .motiongrid-lightbox__dialog::before {
animation: none;
}
}