@layer addon {

    
    .templateMedia.mediaLeft {
        padding: calc(var(--section) / 2) 0;
        @media (min-width: 56em) {
            .media {
                grid-column: span 3;
            }
            .inner {
                grid-column: 5 / span 8;
            }
        }
        @media (--min-fablet) {
            .media {
                grid-column: span 3;
            }
            .inner {
                grid-column: 5 / span 8;
            }
        }
        .inner {
            padding: 0;
            .intro {
                display: flex;
                flex-direction: column;
                gap: var(--gutter);
            }
            .tags {
                gap: var(--gutter);
            }
            .tag, .usp {
                .icon {
                    width: 24px;
                    height: 24px;
                }
            }
            .tag {
                font-size: var(--fontsize);
            }
            .usps {
                display: flex;
                flex-direction: column;
                gap: 8px;
                @media (max-width: 56em) {
                    padding: var(--padding) 0;
                }
                @media (--max-fablet) {
                    padding: var(--padding) 0;
                }
                .usp {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
            }
            .buttons {
                justify-content: space-between;
            }
        }
    }
    .jobPosting {
        header {
            position: relative;
            top: 0;
            .rightMenu {
                .button {
                    opacity: 0;
                }
            }
        }
    }

    .templateCollection.collectionJobPosting {
        padding-bottom: var(--padding);
    }

    .templateReference {
        padding-top: 0;
        .tag {
            box-shadow: inset 0 0 0 1px var(--color-dark);
            padding: 8px;
            font-size: var(--xs-fontsize);
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            color: var(--color-dark);
            max-width: max-content;
            border-radius: var(--border-radius);
            letter-spacing: 0.02rem;
            line-height: 1;
            .icon {
                width: 12px;
                height: 12px;
            }
        }
    }
    
    .section-sticky {
        width: 100%;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        height: 0;
        transition: var(--transition);
        padding: 0;
        &:before {
            display: none;
        }
        .container {
            padding: calc(var(--padding) / 2) 0;
        }
        .inner {
            grid-column: span 8;
            gap: var(--gutter);
            @media (max-width: 56em) {
                display: none;
            }
            @media (--max-fablet) {
                display: none;
            }
            .title {
                color: var(--color-light);
                font-size: var(--m-fontsize);
                line-height: var(--m-lineheight);
            }
        }
        .buttons {
            grid-column: 9 / span 4;
            display: flex;
            justify-content: flex-end;
            flex-direction: row;
            align-items: center;
            gap: var(--gutter);
            @media (max-width: 56em) {
                grid-column: span 12;
            }
            @media (--max-fablet) {
                grid-column: span 12;
            }
            .textLink {
                .icon {display: none;}
                @media (max-width: 56em) {
                    display: none;
                }
                @media (--max-fablet) {
                    display: none;
                }
            }
        }
        &.is-sticky {
            position: fixed;
            top: 0;
            visibility: visible;
            opacity: 1;
            height: auto;
        }
        
    }
    
    .templateMedia.mediaLeft, .templateMedia.video, .templateContent.themeColor1 {
        .inner {
            .title {
                font-size: calc(var(--m-fontsize) + 0.5rem);
            }
        }
    }
    
    .templateMedia.video {
        .container {
            gap: var(--padding);
            @media (max-width: 56em) {
                row-gap: calc(var(--padding) * 2);
            }
            @media (--max-fablet) {
                row-gap: calc(var(--padding) * 2);
            }
        }
        .inner {
            padding: 0;
        }
    }


    .templateContent.lessPadding {
        padding-bottom: calc(var(--section) / 2);
    }

    .jobPosting {
        .templateMedia {
            .goBack {
                grid-column: span 12;
                button {
                    display: flex;
                    align-items: center;
                    height: fit-content;
                    gap: calc(var(--gutter) / 2);
                    cursor: pointer;
                    color: var(--color-light);
                    .icon {
                        .transparent {
                            opacity: 0.2;
                        }
                    }
                    &:hover {
                        @media (hover: hover) {
                            .icon:last-of-type {
                                path {
                                    fill: var(--color-light);
                                    transition: var(--transition);
                                    &.transparent {
                                        fill: var(--color2);
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}