





.mhero{padding-top:100px}
.mhero-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  height:auto;aspect-ratio:1380/480;padding:40px;background:var(--mg-dark) url("../../assets/main-hero.jpg") center center/cover no-repeat;border-radius:var(--r-card);color:#fff}
.mhero-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;height:36px;color:#fff}
.mhero-badge__t{padding-top:1px;font-stretch:var(--w-hyper);font-weight:500;font-size:14px;line-height:18px}
.mhero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.mhero-h1{font-stretch:var(--w-power);font-weight:700;font-size:40px;line-height:44px;letter-spacing:-.01em}
.mhero-aside{flex:0 0 380px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:4px}
.mg-mp{display:flex;gap:8px}
.mg-mp img{width:40px;height:40px;border-radius:10px}
.mhero-lead{font-stretch:var(--w-hyper);font-weight:400;font-size:16px;line-height:21px;color:rgba(255,255,255,.72)}



@media (min-width:1200px){
  .mhero-bottom{gap:40px}
  .mhero-h1{flex:none;font-size:min(40px,calc((100vw - 480px) / 22.5));line-height:1.1}
  .mhero-aside{flex:1 1 auto;min-width:300px;max-width:380px}
}
@supports (align-items:last baseline){ .mhero-bottom{align-items:last baseline} .mhero-aside{padding-bottom:0} }
@media (max-width:1199px){
  .mhero-card{aspect-ratio:auto;min-height:440px;padding:32px}
  .mhero-bottom{flex-direction:column;align-items:flex-start;gap:24px}
  .mhero-h1{font-size:min(34px,calc((100vw - 112px) / 22.5));line-height:1.1}
  .mhero-aside{flex:none;width:min(100%,460px);padding-bottom:0}
}
@media (max-width:767px){
  .mhero{padding-top:84px}
  .mhero-card{min-height:400px;padding:20px;border-radius:20px}
  .mhero-badge{gap:10px}
  .mhero-badge__t{font-size:13px;line-height:16px}
  .mhero-bottom{gap:20px}

  .mhero-h1{font-size:min(28px,calc((100vw - 72px) / 15.3));line-height:1.15}
  .mhero-aside{gap:14px}
  .mg-mp img{width:36px;height:36px;border-radius:9px}
  .mhero-lead{font-size:15px;line-height:20px}
}
@media (max-width:1199px) and (max-height:500px) and (orientation:landscape){ .mhero-card{min-height:320px} }
