/* 
 * 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-related-pages .awx-section__secondary-content{
  background-image:none !important;
}

.awx-related-pages__description{
  margin-bottom:var(--awx-sp-v3);
}

.awx-carousel.awx-related-pages__carousel{
  --carousel-item-width:320px;
  --carousel-item-gap:var(--awx-sp-h);
  --carousel-inline-padding:var(--awx-body-padding-h-lg);
}

.awx-carousel.awx-related-pages__carousel .awx-carousel__controls{
    padding-right:var(--awx-body-padding-h-lg);
  }

.awx-related-pages__cta{
  margin:var(--awx-sp-h2) var(--awx-body-padding-h-lg);
}

.awx-related-pages__cta .awx-button{
    width:100%;
  }

.awx-web-story-feed__hgroup-content{
  margin:var(--awx-sp-v) var(--awx-body-padding-h-lg) var(--awx-sp-v3-5);
}

.awx-related-pages--web-story-feed .awx-section__hgroup-wrapper .awx-carousel__controls{
    display:none;
  }

.awx-related-pages--web-story-feed .awx-related-pages__description{
    margin:var(--awx-sp-v2) 0 var(--awx-sp-v);
  }

.awx-related-pages--web-story-feed .awx-section__content{
    padding:0;
  }

.awx-carousel.awx-web-story-feed__carousel{
  --carousel-item-width:260px;
  --carousel-item-shrink:0.8;

  position:static;
}

.awx-carousel.awx-web-story-feed__carousel .awx-carousel__slides{
    transition:all 600ms var(--awx-ease-in-out);
  }

.awx-carousel.awx-web-story-feed__carousel .awx-card{
    transition:transform 600ms var(--awx-ease-in-out), opacity 300ms var(--awx-ease-in-out);
    transform:scale3d(var(--carousel-item-shrink), var(--carousel-item-shrink), var(--carousel-item-shrink));
    transform-origin:top left;
    pointer-events:none;
    opacity:0.6;
  }

.awx-carousel.awx-web-story-feed__carousel .awx-carousel__slide--active{
    z-index:1;
  }

.awx-carousel.awx-web-story-feed__carousel .awx-carousel__slide--active .awx-card{
      transform:scale3d(1, 1, 1);
      pointer-events:auto;
      opacity:1;
    }

@media (min-width: 64em){
  .awx-related-pages__cta{
    position:absolute;
    top:calc(var(--awx-sp-v5) + var(--awx-sp-v0-5));
    right:var(--awx-body-padding-h-lg);
    margin:0;
  }
    .awx-related-pages--web-story-feed .awx-section__hgroup-wrapper .awx-carousel__controls{
      display:block;
      margin-top:var(--awx-sp-v2);
      padding-left:0;
      text-align:left;
    }

  .awx-web-story-feed__hgroup-content{
    margin:var(--awx-sp-v) 0;
  }
    .awx-carousel.awx-related-pages__carousel .awx-carousel__indicator{
      right:calc(var(--awx-body-padding-h-lg) + var(--awx-sp-h5));
      left:var(--awx-body-padding-h-lg);
    }

    .awx-carousel.awx-related-pages__carousel .awx-carousel__controls{
      padding-right:var(--awx-body-padding-h-lg);
    }

  .pattern-preview__markup .awx-carousel.awx-related-pages__carousel .awx-carousel__indicator{
    right:calc(var(--awx-body-padding-h-lg) + var(--awx-sp-h5));
  }

  .awx-carousel.awx-web-story-feed__carousel{
    --carousel-item-width:320px;
    --carousel-inline-padding:0;
  }

    .awx-carousel.awx-web-story-feed__carousel .awx-carousel__controls{
      display:none;
    }

  .awx-related-pages--web-story-feed .awx-section__content{
    flex:auto;
    padding-right:0 !important;
  }
}

@media (min-width: 80em){
  .awx-carousel.awx-related-pages__carousel{
    --carousel-item-width:480px;
  }

  .awx-carousel.awx-web-story-feed__carousel{
    --carousel-item-width:320px;
    --carousel-inline-padding:0;
  }
}