@layer addon {
    .templateCollection.collectionJobPosting, .templateFilter.filterJobPosting {
        .block {
            background-color: var(--color-dark);
            .inner {
                align-items: center;
                text-align: center;
                gap: var(--gutter);
                padding-top: calc(var(--padding) * 2);
                @media (max-width: 56em) {
                    padding-top: calc(var(--padding) * 4);
                }
                @media (--max-fablet) {
                    padding-top: calc(var(--padding) * 4);
                }
                .title {
                    font-size: calc(var(--m-fontsize) + .25rem);
                    font-family: "Bungee", sans-serif;
                }
                .title, .textLink, .content {
                    color: var(--color-light);
                }
                .header {
                    gap: 0;
                }
                .tags {
                    flex-direction: row;
                    justify-content: center;
                    column-gap: var(--gutter);

                    .tag {
                        color: var(--color-light);
                        .symbol {
                            svg, path {
                                fill: var(--color-light);
                            }
                        }
                    }
                }
            }
            &:before,
            &:after {
                content: '';
                position: absolute;
                z-index: 8;
                background-color: var(--color-light);
                width: 40px;
                height: 40px;
            }

            &:before {
                top: 40px;
                right: 0px;
            }
            &:after {
                top: 0;
                right: 40px;
            }
        }
        &.themeColor3 {
            .item:not(.open-sollicitatie) {
                .block {
                    background-color: var(--color-light);
                    .title, .content, .textLink {
                        color: var(--color-dark);
                    }
                    &:before,
                    &:after {
                        background-color: var(--color-dark);
                    }
                }
            }
        }
        .open-sollicitatie {
            overflow: hidden;
            .media {
                position: absolute;
                height: 100%;
                width: 100%;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
                &:before {
                    content: "";
                    background: rgba(0, 0, 0, 0.43);
                    width: 100%;
                    height: 100%;
                    display: block;
                    left: 0;
                    top: 0;
                    position: absolute;
                }
            }
            .inner {
                position: relative;
                .content {
                    font-size: var(--xs-fontsize);
                    line-height: var(--xs-lineheight);
                }
            }
        }

    }
}