/* ==========================================================================
   mission.css, split image/text "knowledge, passion, impact" section
   ========================================================================== */
.vr-mission{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--vr-sand);}
/* No max-height: the row's height comes from the text column, and capping the
   media at 560px left a strip of sand under the photo at every width where
   the copy ran taller than that (22px at 1440, 75px around 980). */
.vr-mission__media{min-height:420px; overflow:hidden;}
.vr-mission__media img{width:100%; height:100%; object-fit:cover; object-position:center;}
.vr-mission__body{padding:var(--vr-section-y) 64px; display:flex; flex-direction:column; justify-content:center;}
.vr-mission__head{font-weight:500; font-size:clamp(1.7rem,3.2vw,2.2rem); color:var(--vr-teal); line-height:1.25; margin-bottom:1.2rem;}
.vr-mission__head em{font-style:italic; color:var(--vr-blush);}
.vr-mission__text{font-size:1.1rem; margin-bottom:2rem; max-width:48ch;}
.vr-mission__body .vr-btn{align-self:flex-start;}

@media (max-width:820px){
  .vr-mission{grid-template-columns:1fr;}
  .vr-mission__media{min-height:300px;}
  .vr-mission__body{padding:56px 24px;}
}