#image-intro.lazy,
#img-gallery1.lazy,
#img-gallery2.lazy, 
#img-gallery3.lazy,
#img-cs-actionaid-1.lazy,
#img-cs-actionaid-2.lazy,
#img-cs-actionaid-3.lazy,
#img-cs-g-class-1.lazy,
#img-cs-g-class-2.lazy,
#img-cs-g-class-3.lazy,
#img-cs-g-class-4.lazy,
#img-cs-upsell-1.lazy,
#img-cs-upsell-2.lazy,
#img-cs-upsell-3.lazy,
#img-cs-upsell-4.lazy,
#img-client-list.lazy,
#img-client-list.lazy,
#img-cs-mbfs-c-1.lazy,
#img-cs-mbfs-c-2.lazy,
#img-cs-mbfs-c-3.lazy,
#img-cs-mbfs-c-4.lazy,
#img-cs-mbfs-c-5.lazy,
#img-cs-mbfs-c-6.lazy,
#img-cs-logo-hero.lazy,
#img-cs-logo-1.lazy,
#img-cs-logo-2.lazy,
#img-cs-logo-3.lazy,
#img-cs-logo-4.lazy,
#img-cs-logo-5.lazy,
#img-cs-logo-6.lazy,
#img-cs-logo-7.lazy,
#img-cs-logo-8.lazy,
#img-cs-logo-9.lazy,
#img-cs-logo-10.lazy,
#img-cs-logo-11.lazy,
#img-cs-logo-12.lazy,
#img-skill1.lazy,
#img-skill2.lazy,
#img-skill3.lazy,
#img-skill4.lazy,
#img-skill5.lazy,
#img-skill6.lazy,
#img-skill7.lazy,
#img-cs-qpr-1.lazy,
#img-cs-qpr-2.lazy,
#img-cs-qpr-3.lazy,
#img-cs-qpr-4.lazy,
#img-cs-qpr-5.lazy {
  background-image: none;
  background-color: var(--color-grey);
}

#img-placeholder,
#image-intro,
#img-gallery1,
#img-gallery2,
#img-gallery3,
#img-cs-actionaid-1,
#img-cs-actionaid-2,
#img-cs-actionaid-3,
#img-cs-g-class-1,
#img-cs-g-class-2,
#img-cs-g-class-3,
#img-cs-g-class-4,
#img-cs-upsell-1,
#img-cs-upsell-2,
#img-cs-upsell-3,
#img-cs-upsell-4,
#img-client-list,
#img-cs-mbfs-c-1,
#img-cs-mbfs-c-2,
#img-cs-mbfs-c-3,
#img-cs-mbfs-c-4,
#img-cs-mbfs-c-5,
#img-cs-mbfs-c-6,
#img-cs-logo-hero,
#img-cs-logo-1,
#img-cs-logo-2,
#img-cs-logo-3,
#img-cs-logo-4,
#img-cs-logo-5,
#img-cs-logo-6,
#img-cs-logo-7,
#img-cs-logo-8,
#img-cs-logo-9,
#img-cs-logo-10,
#img-cs-logo-11,
#img-cs-logo-12,
#img-cs-qpr-1,
#img-cs-qpr-2,
#img-cs-qpr-3,
#img-cs-qpr-4,
#img-cs-qpr-5 {
    max-width: max-content;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
    width: var(--img-max);
    max-width: var(--img-max);
    aspect-ratio: 21/9;
    background-image: url("../IMAGES/header.jpg");
    border-radius: var(--size-m);
}
#img-placeholder {
    background-image: url("https://placehold.co/210x90");
}
#img-gallery1 {
    padding: 0 0 var(--size-xl) 0;
    aspect-ratio: 1.68/1;
    background-image: url("../IMAGES/mb-results.png");
}
#img-gallery2 {
    padding: 0 0 var(--size-xl) 0;
    aspect-ratio: 1.68/1;
    background-image: url("../IMAGES/mb-fs.png");
}
#img-gallery3 {
    padding: 0 0 var(--size-xl) 0;
    aspect-ratio: 1.68/1;
    background-image: url("../IMAGES/qpr.png");
}

#img-cs-actionaid-1 {
    background-image: url("../IMAGES/cs_actionaid_before-after_d.jpg");
}
#img-cs-actionaid-2 {
    background-image: url("../IMAGES/cs_actionaid_mobile-screens_d.jpg");
}
#img-cs-actionaid-3 {
    background-image: url("../IMAGES/cs_actionaid_article_d.jpg");
}

#img-cs-g-class-1 {
    background-image: url("../IMAGES/cs_mb-g-class_hero_d.jpg");
}
#img-cs-g-class-2 {
    background-image: url("../IMAGES/cs_mb-g-class_ux_d.jpg");
}
#img-cs-g-class-3 {
    background-image: url("../IMAGES/cs_mb-g-class_maybach_d.jpg");
}
#img-cs-g-class-4 {
    aspect-ratio: 1.61/1;
    border-radius: 0;
    background-image: url("../IMAGES/cs_mb-g-class_d.jpg");
}

#img-cs-upsell-1 {
    background-image: url("../IMAGES/cs_mb_upsell_hero_d.jpg");
}
#img-cs-upsell-2 {
    background-image: url("../IMAGES/cs_mb_upsell_cards_d.jpg");
}
#img-cs-upsell-3 {
    aspect-ratio: 240/223;
    border-radius: 0;
    background-image: url("../IMAGES/cs_mb_upsell_results_d.jpg");
}
#img-cs-upsell-4 {
    aspect-ratio: 1.31/1;
    border-radius: 0;
    background-image: url("../IMAGES/cs_mb_upsell_ux_d.jpg");
}

#img-client-list {
    background-position: center center;
    background-image: url("../IMAGES/client-list.jpg");
}

#img-cs-mbfs-c-1 {
    background-position: center center;
    background-image: url("../IMAGES/cs_mb-fs-c_hero_d.jpg");
}
#img-cs-mbfs-c-2 {
    aspect-ratio: 112/100;
    background-image: url("../IMAGES/cs_mb-fs-c_design_d.jpg");
}
#img-cs-mbfs-c-3 {
    background-position: center center;
    background-image: url("../IMAGES/cs_mb-fs-c_design-2_d.jpg");
}
#img-cs-mbfs-c-4 {
    aspect-ratio: 15/9;
    background-position: center center;
    background-image: url("../IMAGES/cs_mb-fs-ux-1_d.jpg");
}
#img-cs-mbfs-c-5 {
    aspect-ratio: 15/9;
    background-position: center center;
    background-image: url("../IMAGES/cs_mb_fs_components.jpg");
}
#img-cs-mbfs-c-6 {
    aspect-ratio: 15/9;
    background-position: center center;
    background-image: url("../IMAGES/cs_mb-fs-ux-2_d.jpg");
}

#img-cs-logo-hero {
    background-image: url("../IMAGES/logo_hero_d.jpg");
}
#img-cs-logo-1 {
    background-image: url("../IMAGES/logo_1_d.jpg");
}
#img-cs-logo-2 {
    background-image: url("../IMAGES/logo_2_d.jpg");
}
#img-cs-logo-3 {
    background-image: url("../IMAGES/logo_3_d.jpg");
}
#img-cs-logo-4 {
    background-image: url("../IMAGES/logo_4_d.jpg");
}
#img-cs-logo-5 {
    background-image: url("../IMAGES/logo_5_d.jpg");
}
#img-cs-logo-6 {
    background-image: url("../IMAGES/logo_6_d.jpg");
}
#img-cs-logo-7 {
    background-image: url("../IMAGES/logo_7_d.jpg");
}
#img-cs-logo-8 {
    background-image: url("../IMAGES/logo_8_d.jpg");
}
#img-cs-logo-9 {
    background-image: url("../IMAGES/logo_9_d.jpg");
}
#img-cs-logo-10 {
    background-image: url("../IMAGES/logo_10_d.jpg");
}
#img-cs-logo-11 {
    background-image: url("../IMAGES/logo_11_d.jpg");
}
#img-cs-logo-12 {
    background-image: url("../IMAGES/logo_12_d.jpg");
}
#img-cs-qpr-1 {
    background-image: url("../IMAGES/cs_qpr_1_d.jpg");
}
#img-cs-qpr-2 {
    background-image: url("../IMAGES/cs_qpr_2_d.jpg");
}
#img-cs-qpr-3 {
    background-image: url("../IMAGES/cs_qpr_3_d.jpg");
}
#img-cs-qpr-4 {
    aspect-ratio: 12/8.1;
    background-image: url("../IMAGES/cs_qpr_4_d.jpg");
}
#img-cs-qpr-5 {
    background-image: url("../IMAGES/cs_qpr_5_d.jpg");
}


@media (max-width: 1552px) {
    #image-intro,
    #img-gallery1,
    #img-gallery2,
    #img-gallery3,
    #img-cs-actionaid-1,
    #img-cs-actionaid-2,
    #img-cs-actionaid-3,
    #img-cs-g-class-1,
    #img-cs-g-class-2,
    #img-cs-g-class-3,
    #img-cs-g-class-4,
    #img-cs-upsell-1,
    #img-cs-upsell-2,
    #img-cs-upsell-3,
    #img-cs-upsell-4,
    #img-client-list,
    #img-cs-mbfs-c-1,
    #img-cs-mbfs-c-2,
    #img-cs-mbfs-c-3,
    #img-cs-mbfs-c-4,
    #img-cs-mbfs-c-5,
    #img-cs-mbfs-c-6,
    #img-cs-logo-hero,
    #img-cs-logo-1,
    #img-cs-logo-2,
    #img-cs-logo-3,
    #img-cs-logo-4,
    #img-cs-logo-5,
    #img-cs-logo-6,
    #img-cs-logo-7,
    #img-cs-logo-8,
    #img-cs-logo-9,
    #img-cs-logo-10,
    #img-cs-logo-11,
    #img-cs-logo-12,
    #img-cs-qpr-1,
    #img-cs-qpr-2,
    #img-cs-qpr-3,
    #img-cs-qpr-4,
    #img-cs-qpr-5 {
        width: 94%;
    }
}
@media (max-width: 500px) {
    #image-intro,
    #img-gallery1,
    #img-gallery2,
    #img-gallery3,
    #img-cs-actionaid-1,
    #img-cs-actionaid-2,
    #img-cs-actionaid-3,
    #img-cs-g-class-1,
    #img-cs-g-class-2,
    #img-cs-g-class-3,
    #img-cs-g-class-4,
    #img-cs-upsell-1,
    #img-cs-upsell-2,
    #img-cs-upsell-3,
    #img-cs-upsell-4,
    #img-client-list,
    #img-cs-mbfs-c-1,
    #img-cs-mbfs-c-2,
    #img-cs-mbfs-c-3,
    #img-cs-mbfs-c-4,
    #img-cs-mbfs-c-5,
    #img-cs-mbfs-c-6,
    #img-cs-logo-hero,
    #img-cs-logo-1,
    #img-cs-logo-2,
    #img-cs-logo-3,
    #img-cs-logo-4,
    #img-cs-logo-5,
    #img-cs-logo-6,
    #img-cs-logo-7,
    #img-cs-logo-8,
    #img-cs-logo-9,
    #img-cs-logo-10,
    #img-cs-logo-11,
    #img-cs-logo-12,
    #img-cs-qpr-1,
    #img-cs-qpr-2,
    #img-cs-qpr-3,
    #img-cs-qpr-4,
    #img-cs-qpr-5 {
        width: var(--img-min);
        max-width: var(--img-min);
        aspect-ratio: 109/198;
        background-image: url("../IMAGES/header_m.jpg");
        border-radius: var(--size-s);
    }
    #img-gallery1 {
        padding: 0 0 var(--size-xl) 0;
        background-image: url("../IMAGES/mb-results_m.png");
    }
    #img-gallery2 {
        padding: 0 0 var(--size-xl) 0;
        background-image: url("../IMAGES/mb-fs_m.png");
    }
    #img-gallery3 {
        padding: 0 0 var(--size-xl) 0;
        background-image: url("../IMAGES/qpr_m.png");
    }
    #img-cs-actionaid-1 {
        aspect-ratio: 0.965/1;
        border-radius: 0;
        background-image: url("../IMAGES/cs_actionaid_before-after_m.jpg");
    }
    #img-cs-actionaid-2 {
        aspect-ratio: 0.965/1;
        border-radius: 0;
        background-image: url("../IMAGES/cs_actionaid_mobile-screens_m.jpg");
    }
    #img-cs-actionaid-3 {
        aspect-ratio: 0.965/1;
        border-radius: 0;
        background-image: url("../IMAGES/cs_actionaid_article_m.jpg");
    }
    #img-cs-g-class-1 {
        aspect-ratio: 0.675/1;
        background-image: url("../IMAGES/cs_mb-g-class_hero_m.jpg");
    }
    #img-cs-g-class-2 {
        aspect-ratio: 21/9;
        background-image: url("../IMAGES/cs_mb-g-class_ux_m.jpg");
    }
    #img-cs-g-class-3 {
        aspect-ratio: 0.965/1;
        border-radius: 0;
        background-image: url("../IMAGES/cs_mb-g-class_maybach_m.jpg");
    }
    #img-cs-g-class-4 {
        aspect-ratio: 15/9;
        border-radius: 0;
        background-image: url("../IMAGES/cs_mb-g-class_m.jpg");
    }   
    #img-cs-upsell-1 {
        aspect-ratio: 0.675/1;
        background-image: url("../IMAGES/cs_mb_upsell_hero_m.jpg");
    }
    #img-cs-upsell-2 {
        aspect-ratio: 275/587;
        background-image: url("../IMAGES/cs_mb_upsell_cards_m.jpg");
    }
    #img-cs-upsell-3 {
        aspect-ratio: 240/223;
        border-radius: 0;
        background-image: url("../IMAGES/cs_mb_upsell_results_d.jpg");
    }
    #img-cs-upsell-4 {
        aspect-ratio: 1.31/1;
        border-radius: 0;
        background-image: url("../IMAGES/cs_mb_upsell_ux_d.jpg");
    }
    #img-client-list {
        border-radius: 0;
        background-image: url("../IMAGES/client-list_m.jpg");
    }
    #img-cs-mbfs-c-1 {
    background-image: url("../IMAGES/cs_mb-fs-c_hero_m.jpg");
    }
    #img-cs-mbfs-c-2 {
        aspect-ratio: 112/100;
        background-image: url("../IMAGES/cs_mb-fs-c_design_d.jpg");
    }
    #img-cs-mbfs-c-3 {
        aspect-ratio: 8/15;
        background-image: url("../IMAGES/cs_mb-fs-c_design-2_m.jpg");
    }
    #img-cs-mbfs-c-4 {
        aspect-ratio: 15/9;
        background-image: url("../IMAGES/cs_mb-fs-ux-1_d.jpg");
    }
    #img-cs-mbfs-c-5 {
        background-image: url("../IMAGES/cs_mb_fs_components.jpg");
    }
    #img-cs-mbfs-c-6 {
        background-image: url("../IMAGES/cs_mb-fs-ux-2_d.jpg");
    }


    #img-cs-logo-hero {
        background-image: url("../IMAGES/logo_hero_m.jpg");
    } 
    #img-cs-logo-1 {
        background-image: url("../IMAGES/logo_1_m.jpg");
    }
    #img-cs-logo-2 {
        background-image: url("../IMAGES/logo_2_m.jpg");
    }
    #img-cs-logo-3 {
        background-image: url("../IMAGES/logo_3_m.jpg");
    }
    #img-cs-logo-4 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_4_m.jpg");
    }
    #img-cs-logo-5 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_5_m.jpg");
    }
    #img-cs-logo-6 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_6_m.jpg");
    }
    #img-cs-logo-7 {
        background-image: url("../IMAGES/logo_7_m.jpg");
    }
    #img-cs-logo-8 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_8_m.jpg");
    }
    #img-cs-logo-9 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_9_m.jpg");
    }
    #img-cs-logo-10 {
        background-image: url("../IMAGES/logo_10_m.jpg");
    }
    #img-cs-logo-11 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_11_m.jpg");
    }
    #img-cs-logo-12 {
        aspect-ratio: 109/99;
        background-image: url("../IMAGES/logo_12_m.jpg");
    } 

    #img-cs-qpr-1 {
        aspect-ratio: 115/162;
        background-image: url("../IMAGES/cs_qpr_1_m.jpg");
    }
    #img-cs-qpr-2 {
        background-image: url("../IMAGES/cs_qpr_2_m.jpg");
    }
    #img-cs-qpr-3 {
        background-image: url("../IMAGES/cs_qpr_3_m.jpg");
    }
    #img-cs-qpr-4 {
        aspect-ratio: 275/452;
        background-image: url("../IMAGES/cs_qpr_4_m.jpg");
    }
    #img-cs-qpr-5 {
        background-image: url("../IMAGES/cs_qpr_5_m.jpg");
    }  
}

.wedge-xl {
    height: var(--size-xl);
    max-height: var(--size-xl);
}




/*thumbnail images on homepage for case studies and additional skills*/
#img-case-study1,
#img-case-study2,
#img-case-study3,
#img-case-study4,
#img-case-study5,
#img-skill1,
#img-skill2,
#img-skill3,
#img-skill4,
#img-skill5,
#img-skill6,
#img-skill7 {
    min-width: 596px;
    max-width: 596px;
    height: 386px;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
    background-image: url("../IMAGES/thumb_g-class.jpg");
    border-radius: var(--size-s);
}
#img-case-study2 {
    background-image: url("../IMAGES/thumb_actionaid.jpg");
}
#img-case-study3 {
    background-image: url("../IMAGES/thumb_upsell.jpg");
}
#img-case-study4 {
    background-image: url("../IMAGES/thumb_mb-fs-c.jpg");
}
#img-case-study5 {
    background-image: url("../IMAGES/thumb_qpr.jpg");
}

#img-skill1 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_video.gif");
}
#img-skill2 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_ae.gif");
}
#img-skill3 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_code.jpg");
}
#img-skill4 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_ai.jpg");
}
#img-skill5 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_photo.jpg");
}
#img-skill6 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_mentor.jpg");
}
#img-skill7 {
    min-width: 293px;
    max-width: 293px;
    height: 190px;
    background-image: url("../IMAGES/thumb_skills_logos.jpg");
}

@media (max-width: 500px) {
    #img-case-study1,
    #img-case-study2,
    #img-case-study3,
    #img-case-study4,
    #img-case-study5,
    #img-skill1,
    #img-skill2,
    #img-skill3,
    #img-skill4,
    #img-skill5,
    #img-skill6,
    #img-skill7 {
        min-width: var(--grid-min-width);
        max-width: var(--grid-min-width);
        height: 212px;
    }
    #img-case-study1 {
        background-image: url("../IMAGES/thumb_g-class_m.jpg");
    }

}

#video-intro {
    position: relative;
    width: var(--img-max);
    max-width: var(--img-max);
    aspect-ratio: 21/9;
    margin: auto;
    border-radius: var(--size-m);
    overflow: hidden; /* Ensures rounded corners work */
}

#video-intro video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire div */
    border-radius: var(--size-m);
}

@media (max-width: 500px) {
    #video-intro {
        width: var(--img-min);
        max-width: var(--img-min);
        aspect-ratio: 21/9;
        margin: auto;
        border-radius: var(--size-s);
        overflow: hidden;
    }
    
    #video-intro video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--size-s);
    }
}