.mod-collage-slideshow { position: relative; width: var(--mcs-width, 100%); max-width: 100%; color: #fff; }
.mcs-responsive { display: none; }
.mod-collage-slideshow__viewport { position: relative; overflow: hidden; height: var(--mcs-slide-height, 480px); }
.mod-collage-slideshow__slide { display: none; position: relative; height: 100%; }
.mod-collage-slideshow__slide.is-active { display: block; }
.mod-collage-slideshow__slide.is-active { z-index: 2; }
.mod-collage-slideshow[data-transition="fade"] .mod-collage-slideshow__slide.is-active { animation: collage-fade var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="slide-left"] .mod-collage-slideshow__slide.is-active { animation: collage-slide-left var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="slide-right"] .mod-collage-slideshow__slide.is-active { animation: collage-slide-right var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="slide-up"] .mod-collage-slideshow__slide.is-active { animation: collage-slide-up var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="slide-down"] .mod-collage-slideshow__slide.is-active { animation: collage-slide-down var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="zoom-in"] .mod-collage-slideshow__slide.is-active { animation: collage-zoom var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="zoom-out"] .mod-collage-slideshow__slide.is-active { animation: collage-zoom-out var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="flip"] .mod-collage-slideshow__slide.is-active { animation: collage-flip var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-left"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-left var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-right"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-right var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-up"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-up var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-down"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-down var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-top-left"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-top-left var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-top-right"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-top-right var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-bottom-left"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-bottom-left var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="wipe-bottom-right"] .mod-collage-slideshow__slide.is-active { animation: collage-wipe-bottom-right var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="blur"] .mod-collage-slideshow__slide.is-active { animation: collage-blur var(--mcs-transition-duration, 250ms) ease; }
.mod-collage-slideshow[data-transition="cube"] .mod-collage-slideshow__slide.is-active { animation: collage-cube var(--mcs-transition-duration, 250ms) ease; transform-origin: right center; }
.mod-collage-slideshow__collage { display: grid; height: 100%; grid-auto-rows: minmax(0, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.mod-collage-slideshow__collage--grid { grid-template-columns: repeat(var(--mcs-grid-columns, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--mcs-grid-rows, 2), minmax(0, 1fr)); }
.mod-collage-slideshow__image { margin: 0; min-width: 0; overflow: hidden; background: #20242b; }
.mod-collage-slideshow__image, .mod-collage-slideshow__image > a { display: block; height: 100%; }
.mod-collage-slideshow__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-collage-slideshow__image { position: relative; }
.mod-collage-slideshow__image-content { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(0deg, rgb(0 0 0 / .55), transparent 75%); color: #fff; text-align: center; }
.mcs-structured-content__heading { margin: 0 0 .35rem; font-size: 1.5em; }
.mcs-structured-content__text { margin: 0 0 .7rem; }
.mcs-structured-content__link { margin-top: .15rem; }
.mod-collage-slideshow__collage--featured-left > :first-child { grid-row: span 2; }
.mod-collage-slideshow__collage--featured-right > :first-child { grid-column: 2; grid-row: span 2; }
.mod-collage-slideshow__collage--two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcs-responsive-grid { display: grid; height: 100%; grid-template-columns: repeat(var(--mcs-responsive-columns, 1), minmax(0, 1fr)); gap: .35rem; }
.mcs-responsive-image { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #20242b; }
.mcs-responsive-image, .mcs-responsive-image > a { display: block; height: 100%; }
.mcs-responsive-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcs-responsive-image__content { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(0deg, rgb(0 0 0 / .55), transparent 75%); color: #fff; text-align: center; }
.mcs-transition-layer { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.mcs-outgoing-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.mcs-transition-fragment { position: absolute !important; inset: 0; display: block !important; height: 100% !important; margin: 0; animation-fill-mode: both !important; animation-timing-function: ease-out !important; }
.mcs-transition-layer--mosaic .mcs-transition-fragment { animation-name: collage-mosaic-fragment !important; }
.mcs-transition-layer--shatter .mcs-transition-fragment { animation-name: collage-shatter-fragment !important; }
.mcs-transition-layer--blinds .mcs-transition-fragment { transform-origin: left center; animation-name: collage-blind-fragment !important; }
.mcs-transition-layer--dissolve .mcs-transition-fragment { animation-name: collage-dissolve-fragment !important; }
.mod-collage-slideshow__content { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 5vw, 5rem); pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .55), transparent 70%); }
.mod-collage-slideshow__content > * { max-width: 42rem; pointer-events: auto; }
.mcs-text-position--top-left, .mcs-text-position--middle-left, .mcs-text-position--bottom-left { align-items: flex-start; text-align: left; background: linear-gradient(90deg, rgb(0 0 0 / .55), transparent 70%); }
.mcs-text-position--top-center, .mcs-text-position--middle-center, .mcs-text-position--bottom-center { align-items: center; text-align: center; background: rgb(0 0 0 / .3); }
.mcs-text-position--top-right, .mcs-text-position--middle-right, .mcs-text-position--bottom-right { align-items: flex-end; text-align: right; background: linear-gradient(-90deg, rgb(0 0 0 / .55), transparent 70%); }
.mcs-text-position--top-left, .mcs-text-position--top-center, .mcs-text-position--top-right { justify-content: flex-start; }
.mcs-text-position--middle-left, .mcs-text-position--middle-center, .mcs-text-position--middle-right { justify-content: center; }
.mcs-text-position--bottom-left, .mcs-text-position--bottom-center, .mcs-text-position--bottom-right { justify-content: flex-end; }
.mod-collage-slideshow__control { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--mcs-arrow-background, rgb(0 0 0 / .58)); color: var(--mcs-arrow-color, #fff); cursor: pointer; }
.mod-collage-slideshow__control svg { display: block; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mod-collage-slideshow__control--chevron { width: 3rem; height: 3rem; background: transparent; }
.mod-collage-slideshow__control--circle-outline { border: 2px solid var(--mcs-arrow-color, #fff); background: transparent; }
.mod-collage-slideshow__control--square { border-radius: 0; }
.mod-collage-slideshow__control--rounded-square { border-radius: .65rem; }
.mod-collage-slideshow__control--previous { left: 1rem; }
.mod-collage-slideshow__control--next { right: 1rem; }
.mod-collage-slideshow__dots { position: absolute; z-index: 2; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; }
.mod-collage-slideshow__dot { width: .7rem; height: .7rem; padding: 0; border: 1px solid var(--mcs-dot-color, #fff); border-radius: 50%; background: transparent; cursor: pointer; }
.mod-collage-slideshow__dot.is-active { border-color: var(--mcs-dot-active-color, #fff); background: var(--mcs-dot-active-color, #fff); }
@keyframes collage-fade { from { opacity: .2; } to { opacity: 1; } }
@keyframes collage-slide-left { from { opacity: .3; transform: translateX(12%); } to { opacity: 1; transform: translateX(0); } }
@keyframes collage-slide-right { from { opacity: .3; transform: translateX(-12%); } to { opacity: 1; transform: translateX(0); } }
@keyframes collage-slide-up { from { opacity: .3; transform: translateY(12%); } to { opacity: 1; transform: translateY(0); } }
@keyframes collage-slide-down { from { opacity: .3; transform: translateY(-12%); } to { opacity: 1; transform: translateY(0); } }
@keyframes collage-zoom { from { opacity: .2; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes collage-zoom-out { from { opacity: .2; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes collage-flip { from { opacity: .2; transform: perspective(900px) rotateY(55deg); } to { opacity: 1; transform: perspective(900px) rotateY(0); } }
@keyframes collage-wipe-left { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes collage-wipe-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes collage-wipe-up { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes collage-wipe-down { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes collage-wipe-top-left { from { clip-path: polygon(0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 200% 0, 0 200%); } }
@keyframes collage-wipe-top-right { from { clip-path: polygon(100% 0, 100% 0, 100% 0); } to { clip-path: polygon(100% 0, -100% 0, 100% 200%); } }
@keyframes collage-wipe-bottom-left { from { clip-path: polygon(0 100%, 0 100%, 0 100%); } to { clip-path: polygon(0 100%, 0 -100%, 200% 100%); } }
@keyframes collage-wipe-bottom-right { from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); } to { clip-path: polygon(100% 100%, -100% 100%, 100% -100%); } }
@keyframes collage-blur { from { opacity: .15; filter: blur(14px); transform: scale(1.035); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes collage-cube { from { opacity: .2; transform: perspective(1000px) rotateY(-85deg); } to { opacity: 1; transform: perspective(1000px) rotateY(0); } }
@keyframes collage-mosaic-fragment { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }
@keyframes collage-shatter-fragment { from { opacity: 0; transform: translate(22%, -16%) rotate(14deg) scale(.7); } to { opacity: 1; transform: translate(0) rotate(0) scale(1); } }
@keyframes collage-blind-fragment { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes collage-dissolve-fragment { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }
@media (max-width: 640px) { .mod-collage-slideshow__collage { gap: .2rem; } .mod-collage-slideshow__content { padding: 2rem 3.5rem; } }
@media (min-width: 641px) and (max-width: 1024px) {
    .mcs-main[data-tablet-mode="images"] { display: none; }
    .mcs-main[data-tablet-mode="images"] + .mcs-responsive--tablet { display: block; }
    .mcs-main[data-tablet-mode="whole"] .mod-collage-slideshow__viewport { height: auto; aspect-ratio: var(--mcs-responsive-ratio, 16 / 9); }
}
@media (max-width: 640px) {
    .mcs-main[data-mobile-mode="images"] { display: none; }
    .mcs-main[data-mobile-mode="images"] ~ .mcs-responsive--mobile { display: block; }
    .mcs-main[data-mobile-mode="whole"] .mod-collage-slideshow__viewport { height: auto; aspect-ratio: var(--mcs-responsive-ratio, 16 / 9); }
}
