header.hero-blue-image {
    position: relative;
    background-color: rgba(2, 16, 64, 1);
    overflow: hidden;
}

header.hero-blue-image .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--bg-pos, center center); 
}

header.hero-blue-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(to left, rgba(2, 16, 64, 1) 0%, rgba(2, 16, 64, 1) 35%, rgba(2, 16, 64, 0) 100%);
}

header.hero-blue-image .contained {
    position: relative;
    z-index: 3;
    gap: 3rem;
    flex-direction: row-reverse;
    display: flex; 
}

header.hero-blue-image .contained > div {
    width: min(45rem, 100%);
}

header.hero-blue-image h1 {
    font-size: 4rem; 
    width: min(35rem, 100%);
    margin-left: auto;
    text-align: right;
    color: #ffffff;
}

header.hero-blue-image p.hero-description {
    text-align: right;
    color: #ffffff;
}

@media(width < 40rem){
    header.hero-blue-image h1 {
        font-size: 2.7rem;
        width: min(30rem, 100%);
    }

    header.hero-blue-image::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        background-image: linear-gradient(to left, rgba(2, 16, 64, 1) 0%, rgba(2, 16, 64, 1) 35%, rgba(2, 16, 64, 0.25) 100%);
    }
}