/* Photography frames shared only by the four refreshed landing pages. */
main img.mc-photo { display:block; width:100%; max-width:none; height:auto; aspect-ratio:3 / 2; object-fit:cover; object-position:center; border-radius:8px; }
main img.mc-photo-hero { display:block; width:100%; max-width:none; height:auto; aspect-ratio:3 / 2; object-fit:cover; object-position:center; }
@media (min-width:768px) {
 body .Hero__image-inner:has(.mc-photo-hero) { height:100%; }
 body .Hero__image-container img.mc-photo-hero { width:100%; height:100%; object-fit:cover; object-position:center; }
 .hp-hero .hero_half_image img.mc-photo-hero { height:100%; object-fit:cover; object-position:center; border-radius:8px; }
 .hp-hero .hero_half_image img.mc-photo-hero[src*="highprotein-sport-hero"] { object-position:right center; }
}
@media (max-width:767px) {
 .Hero:has(.mc-photo-hero) { min-height:0 !important; }
 .Hero__image-inner:has(.mc-photo-hero) { width:100%; height:auto; }
 .Hero:has(.mc-photo-hero) .Hero__content { padding:24px 0; }
 .hp-hero .hero_half_image img.mc-photo-hero { border-radius:8px; }
 .seo_block:has(.mc-photo) .text_wrapper, .info_block:has(.mc-photo) .text_wrapper { margin-top:24px !important; }
}
@media (max-width:360px) {
 /* Long German words must also fit beside the refreshed mobile photography. */
 body:has(.mc-photo-hero) a[href="/privacy"], main:has(.mc-photo-hero) :is(h1,h2,h3,h4) { overflow-wrap:anywhere; }
}

/* Benefit photography replaces the legacy coloured cutout collages. */
#four-highlights img.mc-highlight-photo[src*="box-l-insulation"] {object-fit:contain;background:#f5ebe0;}
.side-by-side-stacked-mb img.mc-protein-meal {height:auto;object-fit:contain;border-radius:8px;align-self:center;}
#four-highlights img.mc-highlight-photo {display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:8px;}
.four-icon-block img.mc-benefit-photo {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;margin:0 0 20px;}
.four-icon-block:has(.mc-benefit-photo) .row {row-gap:28px;}
@media(max-width:575px) {
 #four-highlights:has(.mc-highlight-photo) .grid {grid-template-columns:1fr!important;}
 .four-icon-block:has(.mc-benefit-photo) .row > div {width:100%;}
 .four-icon-block img.mc-benefit-photo {aspect-ratio:4 / 3;}
}