@layer addon { .templateBlocks { .splide__list { 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 { .inner { .intro { grid-column: span 4; } .buttons { grid-column: span 4; } .grid { grid-row: span 3; grid-column: 6 / span 7; .block { gap: var(--padding); border-radius: 0; @media (min-width: 56em) { align-items: center; } @media (--min-fablet) { align-items: center; } .media { order: 2; border-radius: var(--border-radius); height: fit-content; img { aspect-ratio: 1; } } .inner { display: flex; justify-content: center; align-items: flex-start; .intro { grid-column: span 12; display: flex; flex-direction: column; padding: 0; .title { order: 2; } .subTitle { order: 1; background-color: var(--color2); border-radius: var(--border-radius); width: fit-content; text-transform: uppercase; font-size: var(--fontsize); line-height: 1; padding: 8px 16px; font-weight: 900; margin-top: 0; margin-bottom: var(--padding); } .content { order: 3; margin-top: var(--gutter); font-size: var(--xs-fontsize); } } } .themeColor1 & { background: var(--gradient); border-radius: var(--border-radius); padding: var(--padding); .title, .content { color: #fff; } .media { border-radius: calc(var(--border-radius) / 2); } .content { a { text-decoration-color: #fff; } } } } } } @media (min-width: 56em) { .inner { grid-template-columns: repeat(12, 1fr); display: grid; gap: var(--gutter); align-items: center; .block { flex-direction: row; .media { width: 40%; } .inner { width: 60%; } } } } @media (--min-fablet) { .inner { grid-template-columns: repeat(12, 1fr); display: grid; gap: var(--gutter); align-items: center; .block { flex-direction: row; .media { width: 40%; } .inner { width: 60%; } } } } .splide__track { .splide__arrows { display: flex; flex-direction: row; gap: calc(var(--gutter) / 2); width: fit-content; position: absolute; right: 0; bottom: 0; .splide__arrow { position: relative; top: unset; transform: unset; left: unset; right: unset; } } .jobPosting & { @media (min-width: 56em) { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: var(--gutter); } @media (--min-fablet) { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: var(--gutter); } .splide__arrows { position: relative; order: 3; } .splide__pagination { order: 2; margin-top: unset; @media (max-width: 56em) { margin: calc(var(--padding) * 0.8) auto 0 auto; } @media (--max-fablet) { margin: calc(var(--padding) * 0.8) auto 0 auto; } } } } } &.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 { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 100; .text {display: none;} } } .inner { position: absolute; z-index: 100; left: 0; width: 100%; bottom: 0; text-align: center; padding: calc(var(--padding) / 2); .title {font-size: var(--fontsize);} .subTitle {font-size: var(--fontsize);margin-top: 0;color: var(--color-light);} .content { margin-top: calc(var(--padding) / 2); } } } } } .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); } &.themeColor1 { .splide__arrow { background-color: rgba(var(--color-dark-transparency), 0.1); color: var(--color-dark); &:hover { @media (hover: hover) { background: var(--color-dark); color: var(--color-light); } } } } &.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); } } } } } }