@layer addon {

    .templateCollection.collectionJobPosting {

        .container {
            background-color: transparent;
        }
        &:last-of-type {
            .container {
                z-index: 2;
                padding-bottom: 0;
            }
            &:after {
                content: "";
                background: var(--gradient);
                height: var(--section);
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 0;
            }
        }

        .inner:has(.grid) {
            grid-column: span 12;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            overflow: initial;
        }
        .intro {
            order: 1;
            @media (min-width: 56em) {
                flex: 1;
            }
            @media (--min-fablet) {
                flex: 1;
            }
        }
        .buttons {
            order: 2;
            font-size: var(--s-fontsize);
            font-weight: 700;
            align-items: flex-end;
            @media (max-width: 56em) {
                padding-bottom: var(--gutter);
            }
            @media (--max-fablet) {
                padding-bottom: var(--gutter);
            }
        }
        .grid {
            order: 3;
        }
    }

    .templateFilter.filterJobPosting {
        .container {
            background-color: transparent;
            border-radius: 0;
            padding: 0;
            .intro {
                text-align: center;
                align-items: center;
                grid-column: 2 / span 10;
                padding: var(--section) 0;
                .title {
                    font-size: var(--xl-fontsize);
                    line-height: var(--xl-lineheight);
                }
                .title, .subTitle, .content {
                    color: var(--color-light);
                }
            }
            .grid {
                border-radius: var(--section-radius) var(--section-radius) 0 0;
                overflow: hidden;
                .filterGrid {
                    .grid {
                        border-radius: 0;
                        padding: 0;
                        gap: 0;
                        .item {
                            border-bottom: 3px solid #E0E3DE;
                            &.job-alert {
                                padding: var(--padding) 0;
                                border-bottom: unset;
                                .block {
                                    background-color: var(--color1);
                                    color: var(--color-light);
                                    .inner {
                                        .title {
                                            color: var(--color-light);
                                            font-size: var(--l-fontsize);
                                            line-height: var(--l-lineheight);
                                            strong {
                                                font-weight: inherit;
                                                color: var(--color3);
                                            }
                                        }
                                        .footer {
                                            .text {
                                                color: var(--color-light);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .themeColor1 & {
                .grid {
                    background-color: var(--color-light);
                }
            }
            .themeColor2 & {
                .grid {
                    background-color: var(--color4);
                }
            }
        }
    }
}