/* 
 * 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.
 */

.awx-missions{
  --enlarge-ratio:30%;

  display:grid;
  grid-template-rows:auto 1fr;
  width:100%;
  padding-bottom:0 !important;
}

.awx-missions .awx-section__secondary-content{
    background-image:none !important;
  }

.awx-missions__list{
  position:relative;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  height:100%;
  margin:0;
  padding:0;
  list-style:none;
  transition:all 1s var(--awx-ease-in-out);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100%;
}

.awx-missions__list:hover{
  background-size:105%;
}

.awx-missions__list::before{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  content:"";
  transition:all 1.2s var(--awx-ease-in-out);
  opacity:0;
  background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--awx-black) 100%), var(--awx-color-dominant-faded);
  mix-blend-mode:multiply;
}

@supports (color: rgb(0 0 0 / 0)){
.awx-missions__list::before{
  background:linear-gradient(180deg, rgb(0 0 0 / 0) 0%, var(--awx-black) 100%), var(--awx-color-dominant-faded);
}
}

.awx-missions.has-active .awx-missions__list::before{
  opacity:0.5;
}

.awx-missions__item{
  position:relative;
  display:block;
  min-height:200px;
  margin:0;
  padding:0;
  transition:all var(--awx-ease-in-out) 600ms;
  border-left:0 solid transparent;
  background-color:var(--awx-color-dominant-lighter);
}

.awx-missions__item:first-child{
  border-left-width:0 !important;
}

.awx-missions--light-gray .awx-missions__item{
    background-color:var(--awx-white);
  }

.awx-missions--dark .awx-missions__item{
    background-color:var(--awx-color-dominant-dark);
  }

.awx-missions.has-active .awx-missions__item{
  border-left-width:1px;
  border-left-color:var(--awx-color-dark-line);
  background-color:transparent;
}

@media (min-width: 64em){
    .awx-missions .awx-section__hgroup{
      max-width:var(--awx-body-max-width);
      margin:0 auto;
    }

    .awx-missions .awx-section__secondary-content{
      max-width:var(--awx-view-max-width);
      margin:0 auto;
    }

  .awx-missions__list{
    flex-direction:row;
  }

  .awx-missions__item{
    flex-basis:70%;
    flex-basis:calc(100% - var(--enlarge-ratio, 30%));
    flex-grow:1;
    min-height:25rem;
  }

  .awx-missions:not(.has-active) .awx-missions__item:hover,
  .awx-missions.has-active .awx-missions__item.toggle-checked{
    flex-basis:100%;
    flex-grow:1;
  }

  .awx-missions:not(.has-active) .awx-missions__item:hover picture::before{
    opacity:0;
  }

  .awx-missions.has-active .awx-missions__item picture{
    opacity:0;
  }
}

@media (min-width: 90em){
  .awx-missions{
    max-height:58rem;
  }

  .awx-missions__item{
    min-height:38rem;
  }
}