@layer addon { .collectionJobPosting, .filterJobPosting { .filterSettings { flex-direction: column; align-items: flex-start; > .text { flex: initial; display: inline-block; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: var(--gradient); font-size: var(--s-fontsize); line-height: var(--s-lineheight); text-transform: uppercase; font-weight: 900; } } .item { min-height: 460px; } .block { .media { &:before { background: linear-gradient(180deg, rgba(19, 26, 35, 0.2) 0%, rgba(19, 26, 35, 0.9) 100%); } } .innerTop { position: relative; z-index: 9; top: var(--padding); left: var(--padding); display: flex; gap: calc(var(--gutter) / 2); flex-wrap: wrap; width: calc(100% - (var(--padding) * 2)); } .inner { gap: var(--gutter); padding-top: var(--section); justify-content: flex-end; .footer { .button { justify-content: space-between; } } .tags { .tag { &.salary { margin-bottom: calc(var(--gutter) / 2); background: var(--gradient); padding: 8px; font-size: var(--xs-fontsize); font-weight: 500; } .text { padding-top: 2px; } } } } } .jobposting, .open-sollicitatie { .innerTop { top: var(--gutter); left: var(--gutter); width: calc(100% - (var(--gutter) * 2)); } .inner { padding: var(--gutter); padding-top: calc(var(--padding) * 2.5); } } .open-sollicitatie { @media (max-width: 56em) { min-height: auto; } @media (--max-fablet) { min-height: auto; } .block { background: var(--gradient); &:before { content: ""; background-image: url('data:image/svg+xml,%3Csvg width=\'182\' height=\'208\' viewBox=\'0 0 182 208\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M62.6592 51.5996L90.7539 100.253L118.837 51.5996L119.27 50.8496H181.441L180.143 53.0996L150.762 104.004L121.435 154.841L92.0537 205.759L90.7549 208.01L89.4551 205.759L60.0605 154.841L30.6797 104.005V104.004L1.29883 53.0996L0 50.8496H62.2256L62.6592 51.5996ZM33.2773 102.504L62.6582 153.341H62.6592L90.7539 202.008L118.836 153.342L148.163 102.505L176.246 53.8496H121.002L92.0537 104.004L90.7549 106.255L89.4561 104.004L60.4932 53.8496H5.19531L33.2773 102.504ZM121.434 2.25L92.0527 53.1006L90.7539 55.3477L89.4551 53.1016L60.0605 2.25098L58.7598 0H122.734L121.434 2.25ZM90.7529 49.3516L117.536 3H63.959L90.7529 49.3516Z\' fill=\'white\' fill-opacity=\'0.25\'/%3E%3C/svg%3E%0A'); background-repeat: no-repeat; background-size: contain; position: absolute; width: 182px; height: 208px; top: var(--gutter); right: var(--gutter); @media (max-width: 56em) { width: 120px; height: 136px; right: calc(var(--gutter) / 2); } @media (--max-fablet) { width: 120px; height: 136px; right: calc(var(--gutter) / 2); } } .inner { .title { font-size: var(--m-fontsize); line-height: var(--m-lineheight); } .content { color: var(--color-light); font-size: calc(var(--xs-fontsize) - 0.1rem); flex-grow: 0; @media (max-width: 56em) { font-size: var(--xs-fontsize); } @media (--max-fablet) { font-size: var(--xs-fontsize); } } .button.outline { box-shadow: inset 0 0 0 2px var(--color-light); &:hover { box-shadow: inset 0 0 0 2px var(--color-light); } } } } } } .filterJobPosting { .item.jobposting { @media (min-width: 56em) { &:first-of-type:has(.top-job) { grid-column: span 8; .inner { .header { .title { font-size: var(--m-fontsize); } } } } } @media (--min-fablet) { &:first-of-type:has(.top-job) { grid-column: span 8; .inner { .header { .title { font-size: var(--m-fontsize); } } } } } } } }