@layer addon { .templateGallery { .splide__list { width: 100%; } .intro { width: calc(100% / 12 * 8); margin: 0 auto; text-align: center; @media (max-width: 56em) { width: 100%; } @media (--max-fablet) { width: 100%; } } .splide__slide { .block { .title { font-size: var(--s-fontsize); line-height: var(--s-lineheight); } .themeColor2 &, .themeColor3 &, .image & { padding-right: var(--padding); .inner { padding: 0; } } .themeColor2 &, .themeColor3 & { .content & { border-radius: 0; } } } } &.image { .popup { border-radius: var(--border-radius); overflow: hidden; &:before { background-color: var(--color1); } } .splide__slide { width: calc(100% / 3 - var(--gutter)); @media (max-width: 56em) { width: calc(100% - var(--gutter)); } @media (--max-fablet) { width: calc(100% - var(--gutter)); } img { aspect-ratio: 16 / 9; } } .splide__track { position: initial; } } &.video { .intro { text-align: center; } .splide__slide { article { transform: scale(0.85); /* Maak de buitenste slides iets kleiner */ transition: transform 0.4s ease; /* Zorgt voor de vloeiende animatie */ opacity: 0.5; /* Optioneel: maak buitenste slides iets transparanter */ } } /* Stijl voor de actieve (middelste) slide */ .splide__slide.is-active { article { transform: scale(1); /* Maak de middelste slide groter */ opacity: 1; /* Volledig zichtbaar */ } } .splide__slide { .inner {display: none;} .media { border-radius: var(--border-radius); .playButton {display: none;} } &.is-active { .inner {display: block;pointer-events: none;} .media { .playButton {display: flex;} } } article { align-items: center; .block { background: none; padding: 0; .media { height: 100%; &:before { content: ""; position: absolute; z-index: 99; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(19, 26, 35, 0.2) 0%, rgba(19, 26, 35, 0.9) 100%); } video { transform: scale(1.02); aspect-ratio: 16 / 9; position: relative; } .playButton { width: 120px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 100; &:before {opacity: 0;} .icon {opacity: 1;} .text {display: none;} } } } } } .splide__pagination { margin: calc(var(--padding) * 0.8) auto 0 auto; } .splide__arrow--prev { margin-top: calc(calc(var(--padding) * 0.4) * -1); left: calc(25% - 16px); } .splide__arrow--next { margin-top: calc(calc(var(--padding) * 0.4) * -1); right: calc(25% - 16px); } &.portrait { .splide { grid-column: 2 / span 10; @media (max-width: 56em) { grid-column: span 12; } @media (--max-fablet) { grid-column: span 12; } .splide__slide { article { width: auto; margin: 0 auto; .block { aspect-ratio: 9 / 16; max-height: 65vh; width: auto; .media { width: auto; } video, img { height: 100%; aspect-ratio: 9 / 16; } } } } } .splide__arrow { &.splide__arrow--prev { left: calc(33.33% - 32px); } &.splide__arrow--next { right: calc(33.33% - 32px); } } } } } } .gvideo-wrapper { width: calc(100% - var(--padding)); height: calc(100% - var(--padding)); margin: calc(var(--padding) / 2); }