.mainjobbanner {
    background: transparent radial-gradient(closest-side at 50% 50%, #434A5C 0%, #030812 100%) 0% 0% no-repeat padding-box;

    .mjb-grid {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        position: relative;
        max-width: 1800px;
        margin: max(335px, 12.75vw) auto 0 auto;

        & .mjb-header {
            margin-top: 50px;
            padding-left: min(200px, 10.42vw);
            padding-right: min(200px, 10.42vw);
            position: relative;
            text-align: center;

            & .textblockHeader {
                font-size: var(--font-size-h2);
                font-weight: bold;
                margin-bottom: 0;
                line-height: 1.2;
                position: relative;
                z-index: 150;
            }

            .textblockSubheader {
                font-size: var(--font-size-h3);
                font-weight: bold;
                z-index: 150;
                position: relative;
            }
        }

        & .mjb-image {
            position: relative;
            margin-left: min(200px, 10.42vw);
            margin-right: min(200px, 10.42vw);
            z-index: 100;

            & img {
                width: 100%;
            }
        }

        & .mjb-textbox {
            display: flex;
            flex-direction: column;
            margin-bottom: 50px;

            & .mjb-colorbox {
                background-image: url("../Images/jobbannerbg.png");
                background-repeat: no-repeat;
                background-position: right center;
                background-size: cover;
                min-width: 300px;
                padding-top: 20px;
                padding-bottom: 20px;
                padding-left: min(200px, 10.42vw);
                padding-right: 40px;
                position: relative;
                align-self: flex-start;

                & .textcolorbox {
                    font-size: var(--font-size-h4);
                    position: relative;
                    width: fit-content;
                }
            }

            & .mjb-text {
                margin-left: min(200px, 10.42vw);
                margin-right: min(200px, 10.42vw);
                padding: 20px 0;

                & .bodytext {
                    font-size: var(--font-size);
                }

            }

            .mjb-button {
                display: flex;
                margin-left: min(200px, 10.42vw);
                margin-right: min(200px, 10.42vw);
                z-index: 100;

                & .frame-layout-button {
                    position: relative;

                    & a {
                        transition: color .15s .08s;
                        position: relative;
                        border-radius: 2px;
                        padding: 10px 20px;
                        font-size: var(--font-size);
                        border: 1px solid;
                    }

                    &::after {
                        background-image: url("../Images/arrow_curved_bottom_right.svg");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        display: block;
                        content: " ";
                        height: 100px;
                        left: 102%;
                        position: absolute;
                        top: 0;
                        width: 126px;
                        transform: translateY(-50%) scaleX(-1);
                    }
                }
            }
        }

        & h1, h2, h3, h4, h5, p, a {
            color: #fff;
        }
    }
}

@media screen and (min-width: 1000px) {
    .mainjobbanner {
        .mjb-grid {
            grid-template-columns: 1fr 1.2fr 1fr;
            grid-template-rows: 1fr;

            & .mjb-header {
                grid-area: 1 / 1 / 3 / 2;
                left: min(16.03vw, 300px);
                margin-top: 20%;
                padding-left: 0;
                padding-right: 0;
                text-align: left;
                width: fit-content;

                & .textblockHeader {
                    width: max-content;
                }
            }

            & .mjb-image {
                grid-area: 1 / 2 / 4 / 2;
                margin-top: -13vw;
                margin-bottom: 3vw;
                margin-left: 0;
                margin-right: 0;
            }

            & .mjb-textbox {
                grid-area: 1 / 3 / 4 / 4;
                margin-top: 20%;
                width: 70%;
                margin-bottom: 10%;

                & .mjb-colorbox {
                    margin-left: -30%;
                    padding-left: 30%;
                    width: 130%;
                }

                & .mjb-text {
                    margin-left: 0;
                    margin-right: 0;
                }

                & .mjb-button {
                    margin-left: 0;
                    margin-right: 0;

                    & .frame-layout-button {
                        &::after {
                            height: 132px;
                            left: initial;
                            right: 112%;
                            width: 126px;
                            transform: translateY(-50%);
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1921px) {
    .mainjobbanner {
        .mjb-grid {
            & .mjb-image {
                margin-top: -250px;
                margin-bottom: 57px;
            }

            & .mjb-textbox {
                .mjb-button {
                    & .frame-layout-button {
                        &::after {
                            margin-left: 57px;
                        }
                    }
                }
            }
        }
    }
}