/* MYCELX Air Filtration page: images for the shared product components, hero with stacked filters, 4-tile applications,
   filter photo straddling the dark polymer section, Get Started tuning. Desktop values = PSD px x --mx-u. */
.mx-phero-bg{background-image:url("../img/air-filtration/air-filtration-hero-background.webp");background-position:50% 100%}
.mx-stats{background-image:url("../img/air-filtration/air-filtration-stats-background.webp")}

/* hero: copy first, the filters (cut off at the bottom edge, as in the design) flush with the bottom of the hero */
.mx-phero--air{padding-bottom:0}
.mx-phero--air .mx-phero-product{display:block;width:min(74%,320px);margin:36px auto 0}
.mx-phero--air .mx-btn{margin-bottom:0}

/* stats: four items, one-word numbers at the same size */
.mx-stat-num{font-size:38px;white-space:nowrap}

/* applications */
.mx-air-apps{padding-bottom:40px}

/* polymer section: filter photo overlapping the top of the dark panel */
.mx-air-poly{--pw:min(80vw,360px);--ov:calc(var(--pw)*.4275);position:relative}
.mx-air-media{position:relative;z-index:1;width:var(--pw);margin:0 auto}
.mx-air-media img{display:block;width:100%;height:auto}
.mx-air-panel{position:relative;margin-top:calc(var(--ov)*-1);padding:calc(var(--ov) + 32px) var(--mx-gutter) 64px;color:#fff;background:#091722 url("../img/air-filtration/air-filtration-polymer-background.webp") 50% 0/100% 100% no-repeat}
.mx-air-panel .mx-sechead-intro{color:#fff}
.mx-air-panel .mx-benefit h3,.mx-air-panel .mx-benefit p{color:#fff}
.mx-air-panel .mx-benefit-num{color:var(--mx-blue-on-dark)}
.mx-anim .mx-air-media{opacity:0}

@media (min-width:550px){
  .mx.mx .mx-phero--air .mx-phero-product{width:min(56%,380px)}
  .mx.mx .mx-air-poly{--pw:min(60vw,460px)}
  .mx.mx .mx-tiles{max-width:none}
}

@media (min-width:768px){
  .mx.mx .mx-phero--air{padding-bottom:0}
  .mx.mx .mx-phero--air .mx-phero-copy{grid-column:2;grid-row:1;align-self:center;padding-bottom:64px}
  .mx.mx .mx-phero--air .mx-phero-product{grid-column:1;grid-row:1;align-self:end;width:100%;max-width:420px;margin:0 auto}
  .mx.mx .mx-stat-num{font-size:calc(38px + 12*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx.mx .mx-air-apps{padding-bottom:56px}
  .mx.mx .mx-air-poly{--pw:min(52vw,560px)}
  .mx.mx .mx-air-panel{padding:calc(var(--ov) + 48px) var(--mx-gutter) 104px}
  .mx.mx .mx-air-panel .mx-benefit-list{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .mx.mx .mx-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .mx.mx .mx-air-panel .mx-benefit-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1200px){
  .mx.mx .mx-phero--air{height:calc(var(--mx-u)*856);padding:calc(var(--mx-u)*335) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*786)}
  .mx.mx .mx-phero--air .mx-phero-copy{padding-bottom:0;align-self:auto}
  .mx.mx .mx-phero--air .mx-phero-product{left:calc(var(--mx-side) + var(--mx-u)*99);top:calc(var(--mx-u)*177);width:calc(var(--mx-u)*600);max-width:none;margin:0}
  .mx.mx .mx-phero--air h1{line-height:1.054;margin-top:calc(var(--mx-u)*14)}
  .mx.mx .mx-phero--air .mx-phero-text{max-width:calc(var(--mx-u)*400);margin-top:calc(var(--mx-u)*18);line-height:1.4}
  .mx.mx .mx-phero--air .mx-btn{margin-top:calc(var(--mx-u)*26)}
  .mx.mx .mx-stats{padding:calc(var(--mx-u)*116) var(--mx-side) calc(var(--mx-u)*119)}
  .mx.mx .mx-stat{min-height:calc(var(--mx-u)*166)}
  .mx.mx .mx-stat-num{font-size:calc(var(--mx-u)*100)}
  .mx.mx .mx-sechead h2{line-height:1.053}
  .mx.mx .mx-air-apps{padding:calc(var(--mx-u)*123) var(--mx-side) calc(var(--mx-u)*60)}
  .mx.mx .mx-air-apps .mx-sechead-intro{max-width:calc(var(--mx-u)*830)}
  .mx.mx .mx-tiles{width:calc(var(--mx-u)*1414);max-width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--mx-u)*27);margin-top:calc(var(--mx-u)*49)}
  .mx.mx .mx-tile{min-height:calc(var(--mx-u)*347);padding:calc(var(--mx-u)*29) calc(var(--mx-u)*30) calc(var(--mx-u)*30) calc(var(--mx-u)*43)}
  .mx.mx .mx-tile-icon{height:calc(var(--mx-u)*97)}
  .mx.mx .mx-tile h3{margin:calc(var(--mx-u)*8) 0 calc(var(--mx-u)*15);line-height:1.1}
  .mx.mx .mx-tile p{max-width:calc(var(--mx-u)*250)}
  .mx.mx .mx-air-poly{--pw:calc(var(--mx-u)*1158);--ov:calc(var(--mx-u)*495)}
  .mx.mx .mx-air-panel{padding:calc(var(--mx-u)*530) var(--mx-side) calc(var(--mx-u)*151)}
  .mx.mx .mx-air-panel .mx-sechead-intro{max-width:calc(var(--mx-u)*790)}
  .mx.mx .mx-air-panel .mx-benefit-list{margin-top:calc(var(--mx-u)*64);gap:calc(var(--mx-u)*57) calc(var(--mx-u)*29.5)}
  .mx.mx .mx-air-panel .mx-benefit{min-height:calc(var(--mx-u)*263)}
  .mx.mx .mx-air-panel .mx-benefit p{max-width:calc(var(--mx-u)*372)}
  .mx.mx .mx-cta--air p{max-width:calc(367px*var(--mx-m))}
}

/* Get Started: PSB values (copy at x 1135, white copy over the dark tablet / engine photo, white eyebrow .5em, blue phone) */
.mx-cta--air{--mx-cta-wash:9,23,34;--mx-cta-bg:var(--mx-navy);--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#fff;--mx-cta-phone:#226cf2;--mx-cta-h:671.8px;--mx-cta-x:532.2px;--mx-cta-top:170.2px;--mx-wx:.02}
.mx-cta--air .mx-eyebrow{letter-spacing:.5em}
.mx-cta--air .mx-stage{--mx-asp:2000/933;--mx-px:.14}
@media (min-width:768px){.mx.mx .mx-cta--air .mx-stage{--mx-px:.18}}