@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);
                            }
                        }
                    }
                }
            }
        }
    }
}