@layer addon { .templateCover { @media (min-width: 56em) { padding-bottom: var(--section); } @media (--min-fablet) { padding-bottom: var(--section); } .media { &:before { background: var(--gradient-image); content: ""; height: 100%; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 2; } } .inner { align-items: center; justify-content: flex-end; gap: var(--gutter); z-index: 9; text-align: center; @media (min-width: 56em) { grid-column: 3 / span 8; } @media (--min-fablet) { grid-column: 3 / span 8; } .title { font-size: var(--xl-fontsize); line-height: var(--xl-lineheight); background-image: none; @media (max-width: 56em) { font-size: var(--l-fontsize); line-height: var(--l-lineheight); } @media (--max-fablet) { font-size: var(--l-fontsize); line-height: var(--l-lineheight); } } .title, .subTitle, .content { color: var(--color-light); } } .homepage & { padding-top: var(--padding); min-height: fit-content; .logo-cover { width: 400px; position: absolute; z-index: 9; pointer-events: none; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; svg { .gradient { fill: url("#linear-gradient"); } } } video.teaser + video.full { display:none } dialog { max-width: 100%; height: 100%; padding: 0; border-radius: var(--border-radius); button { position: absolute; right: var(--gutter); top: var(--gutter); background-color: rgba(var(--color-light-transparency), 0.2); color: var(--color-light); z-index: 999; padding: 12px; border-radius: var(--border-radius); .icon { width: 16px; height: 16px; } } &::backdrop { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background: rgba(0, 57, 131, 0.6); } } &.playing { video.teaser { display: block; } .pauseButton { opacity: 0; } .logo-cover { opacity: 0; } } .media { position: relative; border-radius: var(--border-radius); overflow: hidden; img, video.teaser { position: relative; overflow: hidden; @media (min-width: 56em) { height: 325px; } @media (--min-fablet) { height: 325px; } } .pauseButton { right: var(--gutter); bottom: var(--gutter); background-color: transparent; color: var(--color-light); z-index: 9; } .buttons { position: absolute; width: fit-content; height: fit-content; bottom: calc(var(--padding) / 2); left: calc(var(--padding) / 2); z-index: 9; .playButton { top: auto; left: 0; transform: none; bottom: 0; } } } .inner { display: flex; grid-column: span 12; flex-wrap: wrap; width: 100%; flex-direction: row; justify-content: flex-start; gap: var(--gutter); text-align: left; article { width: calc(33.3333% - 16px); @media (max-width: 56em) { width: 100%; height: auto; } @media (--max-fablet) { width: 100%; height: auto; } .block { min-height: 250px; padding: var(--gutter); .media { &:before { background: var(--gradient-image); } } &:hover { @media (hover: hover) { .media { img { transform: scale(1.05); } } } } } .media { position: absolute; height: 100%; img { height: 100%; } } .inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0; .title { font-size: var(--fontsize); line-height: var(--lineheight-small); } } .block.jobposting { gap: 16px; .topJobPosting { top: 0; left: 0; z-index: 9; } } } } @media (max-width: 56em) { .media { aspect-ratio: 3 / 4; .logo-cover { width: calc(100vw - calc(var(--spacer) * 4)); } dialog { /* height: fit-content; */ margin: auto var(--spacer); } } } @media (--max-fablet) { .media { aspect-ratio: 3 / 4; .logo-cover { width: calc(100vw - calc(var(--spacer) * 4)); } dialog { /* height: fit-content; */ margin: auto var(--spacer); } } } } } }