.image_with_text {
    position: relative;
    
    /* Full width layout */
    &.full_width {
        & .image_with_text_inner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            width: 100%;
            
            & .image {
                width: 100%;
                height: 100%;
                min-height: 500px;
                
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
            
            & .content {
                padding: clamp(40px, 6vw, 80px);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
            }
        }
        
    }

    /* Container layout */
    &:not(.full_width) {
        & .image_with_text_inner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 60px;
        }
    }

    /* Reverse: content on the left, image on the right (DOM order is image first, content second) */
    & .image_with_text_inner.reverse_section {
        & .content {
            order: 1;
        }
        & .image {
            order: 2;
        }
    }
    
    & .image_with_text_inner {
        & .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            & .subtitle {
                font-family: 'Karla', sans-serif;
                font-size: 2.4rem;
                font-weight: 700;
                line-height: 1;
                letter-spacing: -0.12rem;
                text-transform: uppercase;
                color: var(--subtitle-colour, #FFEB01);
                margin: 0 0 1.6rem;
            }

            /* Headings use title-colour, fall back to content-colour */
            h2,
            h3,
            h4,
            h5,
            h6 {
               margin-bottom: 40px;
               margin-top: 0;
               color: var(--title-colour, var(--content-colour, inherit));
            }
            
            & p {
                font-weight: 400;
                line-height: 1.5;
                color: var(--content-colour, inherit);
            }
            
            & a {
                color: var(--content-colour, #0A3956);
                text-decoration: underline;
            }
            
            h3 {
                font-size: 24px;
                line-height: 125%;
                letter-spacing: 0.2em;
                text-transform: uppercase;
                color: var(--title-colour, var(--content-colour, inherit));
            }
            h4 {
                font-size: 18px;
                line-height: 125%;
                letter-spacing: 0.2em;
                text-transform: uppercase;
                color: var(--title-colour, var(--content-colour, inherit));
                margin-top: 20px;
            }
            
            & .btn_wrapper {
                margin-top: 40px;
            }
        }
    }
    
    /* Button Styles */
    & .image_with_text_button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 32px;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 500px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        min-width: 200px;
        text-decoration: none!important;
        & span {
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        /* Yellow Button */
        &.button_yellow {
            background-color: #FFEB01;
            color: #0A3956;
            
            &:hover {
                background-color: rgb(3 39 61);
                color: #fff;
                
                & span {
                    color: #fff;
                }
            }
        }
        
        /* Blue Button */
        &.button_blue {
            background-color: #122841;
            color: #fff;
            & span {
                color: #fff;
            }
            &:hover {
                background-color: #FFEB01;
                color: #fff;
                
                & span {
                    color: #fff;
                }
            }
        }
        
        @media (max-width: 768px) {
            padding: 14px 28px;
            font-size: 14px;
            min-width: 180px;
            
            & span {
                font-size: 14px;
            }
        }
    }
    
    @media (max-width: 767px) {
        & .image_with_text_inner {
            display: flex!important;
            flex-direction: column-reverse!important;
            gap: 0!important;
        }

        & .image_with_text_inner .image {
            width: 100%;
            max-height: 280px;
            overflow: hidden;

            & img {
                width: 100%;
                height: 100%;
                max-height: 280px;
                object-fit: cover;
                display: block;
            }
        }

        &.full_width {
            & .image_with_text_inner {
                & .image {
                    min-height: 0;
                    max-height: 280px;
                }

                & .content {
                    padding: 40px 20px;
                }
            }
        }

        & h2 {
            margin-bottom: 20px!important;
        }
        & h3 {
            font-size: 18px!important;
        }
        & h4 {
            font-size: 16px!important;
        }
        & br {
            display: none!important;
        }
    }
}

@media (max-width: 991px) {
    .image_with_text {
        & .content {
            top: unset;
        }
    }
}