[data-ctype="inmedium_heroheader"] {
    --primary-color: #8e353a;
}

/*  Info: .offset-custom-left class is set in _container.scss 
    Info two: Mobile button styles are in _buttons.scss
*/

.hero-header-fullwidth {
    .hero-header-wrapper {
        position: relative;
        height: 30rem;

        .hero-header-image {
            position: absolute;
            background-repeat: no-repeat; 
            background-position: center; 
            background-size: cover;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            border-radius: 0 0 2.5rem 2.5rem;

            .hero-header-content-wrapper {
                position: relative;        
                z-index: 1;

                &::after {
                    content: '';
                    position: absolute;
                    z-index: -1;

                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
            
                    background-color: white;
                    opacity: .95;
                    border-radius: 2.5rem;
                }

                .hero-header-content {
                    position: absolute;
                    top: 50%;
                    left: calc(var(--v-gutter-x) * 0.5);;
                    right: calc(var(--v-gutter-x) * 0.5);;
                    transform: translateY(-50%);

                    h1 {
                        overflow-wrap: break-word;
                        hyphens: auto;
                    }
                }
        
                h1 {
                    color: var(--primary-color);
                }
            }
        }
    }
}

.hero-header-columns {
    border-radius: 0 0 0 2.5rem;

    img {
        border-radius: 0 0 0 2.5rem;

        @media (max-width: 767px) {
            border-radius: 0 0 2.5rem 2.5rem;
        }
    }
}

[data-layout="1"], [data-layout="2"], [data-layout="3"] {
    .hero-header-columns {
        @media (max-width: 767px) {
            background: transparent;
        }
    }
}

.hero-header-mobile-wrapper {
    z-index: 1;
    margin-top: -10%;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    border-radius: 2.5rem;
    
    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 2.5rem;
        background: linear-gradient(to right,rgba(195, 73, 79, 1), rgba(142, 53, 58, 1));
        opacity: 0.95;
    }

    .hero-header-mobile {

        p, span, a:not(.btn) {
            color: white;
        }

        a:not(.btn) {
            text-decoration-color: white;

            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 0.35rem;
            text-decoration-color: white;

            &:hover,
            &.hover,
            &:active,
            &.active {
                text-decoration-color: transparent;
            }
            transition: text-decoration-color .2s ease-in-out;
        }

        .h1, h1 {
            color: white;
            overflow-wrap: break-word;
            hyphens: manual;
        }
    }    
}