@layer addon {
    .templateCollection.collectionJobPosting, .templateFilter.filterJobPosting {

        article {
            grid-column: span 6;
            .block {
                height: 100%;
                .media {
                    display: none;
                }
                .inner {
                    justify-content: space-between;
                    .content {
                        flex: 1 1 auto;
                    }
                    .header {
                        align-items: flex-start;
                        gap: calc(var(--gutter) / 2);
                        .title {
                            font-size: var(--m-fontsize);
                            color: var(--color1);
                            order: 1;
                        }
                        .tags {
                            order: 2;
                            .tag {
                                font-size: var(--xs-fontsize);
                                background: none;
                                color: var(--color2);
                                padding: 0;
                            }
                            .tag {
                                &:before {
                                    content: "\2022";
                                    color: var(--color1);
                                    font-weight: bold;
                                    font-family: arial, sans-serif;
                                    font-size: 1em;
                                    vertical-align: middle;
                                }
                                &:first-of-type {
                                    &:before {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                    .footer {
                        .button {
                            .text {font-size: var(--xs-fontsize);}
                            .icon {
                                width: 24px;
                                height: 24px;
                            }
                        }
                    }
                }
            }
        }
    }

    .templateCollection.collectionJobPosting {
        .block {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--section-radius);
            border-bottom-right-radius: var(--section-radius);
        }
    }
    .templateFilter.filterJobPosting {
        .container {
            .grid {
                overflow: initial;
            }
        }
        .item:not(.job-alert) {
            .block {
                border-radius: 0;
                overflow: initial;
                
                &:before {
                    border-radius: var(--section-radius) var(--section-radius) 0 0;
                    width: calc(100% + var(--padding)); 
                    opacity: 0;
                    transition: opacity .2s,transform .25s cubic-bezier(.49,1.42,.25,1.53);
                    transform: translate(-50%,-50%) scale(.95);
                    content: "";
                    background: var(--gradient);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform-origin: center bottom;
                    height: calc(100% + 6px);
                }
                .inner {
                    padding: var(--padding) 0;
                    position: relative;
                    .content {
                        width: calc(100% - var(--section));
                    }
                    .footer {
                        z-index: 2;
                        position: absolute;
                        right: var(--gutter);
                        top: 50%;
                        transform: translateY(-50%);
                        .button.textLink {
                            .icon {
                                width: 24px;
                                height: 24px;
                            }
                            .text {
                                display: none;
                            }
                        }
                    }
                }
    
                &:hover {
                    @media (hover: hover) {
                        color: #fff;
                        &:before {
                            opacity: 1;
                            transform: translate(-50%,-50%);
                        }
                        .title {
                            color: #fff;
                        }
                        .tags {
                            .tag {
                                color: #fff;
                                &:before {
                                    color: #fff;
                                }
                            }
                        }
                        
                        .footer {
                            .button {
                                &.textLink {
                                    .icon {
                                        color: #fff;
                                        transform: translateX(0);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}