@layer addon { .templateMedia.mediaLeft { padding: calc(var(--section) / 2) 0; @media (min-width: 56em) { .media { grid-column: span 3; } .inner { grid-column: 5 / span 8; } } @media (--min-fablet) { .media { grid-column: span 3; } .inner { grid-column: 5 / span 8; } } .inner { padding: 0; .intro { display: flex; flex-direction: column; gap: var(--gutter); } .tags { gap: var(--gutter); } .tag, .usp { .icon { width: 24px; height: 24px; } } .tag { font-size: var(--fontsize); } .usps { display: flex; flex-direction: column; gap: 8px; @media (max-width: 56em) { padding: var(--padding) 0; } @media (--max-fablet) { padding: var(--padding) 0; } .usp { display: flex; align-items: center; gap: 10px; } } .buttons { justify-content: space-between; } } } .jobPosting { header { position: relative; top: 0; .rightMenu { .button { opacity: 0; } } } } .templateCollection.collectionJobPosting { padding-bottom: var(--padding); } .templateReference { padding-top: 0; .tag { box-shadow: inset 0 0 0 1px var(--color-dark); padding: 8px; font-size: var(--xs-fontsize); display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-dark); max-width: max-content; border-radius: var(--border-radius); letter-spacing: 0.02rem; line-height: 1; .icon { width: 12px; height: 12px; } } } .section-sticky { width: 100%; z-index: 999; visibility: hidden; opacity: 0; height: 0; transition: var(--transition); padding: 0; &:before { display: none; } .container { padding: calc(var(--padding) / 2) 0; } .inner { grid-column: span 8; gap: var(--gutter); @media (max-width: 56em) { display: none; } @media (--max-fablet) { display: none; } .title { color: var(--color-light); font-size: var(--m-fontsize); line-height: var(--m-lineheight); } } .buttons { grid-column: 9 / span 4; display: flex; justify-content: flex-end; flex-direction: row; align-items: center; gap: var(--gutter); @media (max-width: 56em) { grid-column: span 12; } @media (--max-fablet) { grid-column: span 12; } .textLink { .icon {display: none;} @media (max-width: 56em) { display: none; } @media (--max-fablet) { display: none; } } } &.is-sticky { position: fixed; top: 0; visibility: visible; opacity: 1; height: auto; } } .templateMedia.mediaLeft, .templateMedia.video, .templateContent.themeColor1 { .inner { .title { font-size: calc(var(--m-fontsize) + 0.5rem); } } } .templateMedia.video { .container { gap: var(--padding); @media (max-width: 56em) { row-gap: calc(var(--padding) * 2); } @media (--max-fablet) { row-gap: calc(var(--padding) * 2); } } .inner { padding: 0; } } .templateContent.lessPadding { padding-bottom: calc(var(--section) / 2); } .jobPosting { .templateMedia { .goBack { grid-column: span 12; button { display: flex; align-items: center; height: fit-content; gap: calc(var(--gutter) / 2); cursor: pointer; color: var(--color-light); .icon { .transparent { opacity: 0.2; } } &:hover { @media (hover: hover) { .icon:last-of-type { path { fill: var(--color-light); transition: var(--transition); &.transparent { fill: var(--color2); opacity: 1; } } } } } } } } } }