/* 
 * DO NOT EDIT THIS FILE.
 * The Airbus Web Experience use PostCSS to compile CSS
 * the same way as in the Drupal core except it use the .pcss extension.
 * Therefore, you are supposed to edit the pcss file of the same name.
 */

.node--crisis-mode-hero .awx-hero{
  display:none;
}

.crisis-mode-hero{
  position:relative;
  color:var(--awx-color-text-light);
  background-color:var(--awx-color-dominant);
  background-image:url("../../../assets/images/airbus-carbon-grid-cropped.png");
  background-repeat:no-repeat;
  background-position:center 60%;
  background-size:240%;
  background-blend-mode:normal;
}

.crisis-mode-hero .awx-scroll-button{
    position:absolute;
    z-index:11;
    bottom:var(--awx-sp-v2);
    left:50%;
    display:block;
    margin-left:-1em;
  }

.crisis-mode-hero--severity-high{
  background-color:#525e74;
  background-blend-mode:overlay;
}

.crisis-mode-hero__content{
  display:grid;
  align-content:center;
  justify-content:center;
  place-content:center;
  height:100svh;
  max-height:67rem;
}

.crisis-mode-hero__body{
  max-width:48rem;
  margin:var(--awx-sp-v) var(--awx-sp-h1-5);
}

.crisis-mode-hero__text{
  margin-bottom:var(--awx-sp-v2);
}

@media (min-width: 80em){
  .crisis-mode-hero{
    background-image:url("../../../assets/images/airbus-carbon-grid-cropped-lg.png");
    background-size:100%;
  }
}

@media (min-width: 120em){
  .crisis-mode-hero{
    background-image:url("../../../assets/images/airbus-carbon-grid.png");
  }
}