/* 
 * 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-announcement{
  display:flex;
  overflow:clip;
  flex-direction:row;
  flex-wrap:wrap;
  width:100%;
  height:100%;
  margin:0 auto;
  border-radius:var(--awx-border-radius);
  box-shadow:0 0 3em -0.2em var(--awx-color-dominant-shadow);
  container-type:inline-size;
  container-name:announcement;
}

.awx-announcement > picture,.awx-announcement .awx-media{
    flex:0 1 100%;
    height:-moz-fit-content;
    height:fit-content;
  }

.awx-announcement .awx-media picture{
    height:100% !important;
  }

.awx-announcement img{
    width:100%;
    height:100%;
  }

.awx-announcement__content{
  display:flex;
  flex:1;
  flex-direction:column;
}

.awx-announcement__content:first-child:last-child{
    flex:1;
  }

.awx-announcement__header{
  padding:0;
}

.awx-announcement__title{
  margin:0;
  padding:var(--awx-sp-v2) var(--awx-sp-h2) 0;
  font-size:max(1.625rem, min(2vw, 2rem));
  font-size:clamp(1.625rem, 2vw, 2rem);
}

.awx-announcement__description{
  flex-grow:1;
  margin:0;
  padding:var(--awx-sp-v) var(--awx-sp-h2) var(--awx-sp-v2);
}

.awx-announcement__description + .awx-announcement__actions{
  margin-top:calc(var(--awx-sp-v)*-1);
}

.awx-announcement__actions{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  margin-top:auto;
  padding:var(--awx-sp-v) var(--awx-sp-h2) var(--awx-sp-v2);
  gap:var(--awx-sp-v) var(--awx-sp-h);
}

.awx-announcement[data-color-scheme="light-gray"]{
  color:var(--awx-color-text);
  background-color:var(--awx-color-dominant-lighter);
}

.awx-announcement[data-color-scheme="dark"]{
  color:var(--awx-color-text-light);
  background-color:var(--awx-color-dominant);
}

@media (min-width: 64em){
    .awx-announcements__carousel .awx-carousel__slides{
      margin-bottom:0;
    }

    .awx-announcements__carousel .awx-carousel__controls{
      right:var(--awx-sp-h);
      bottom:var(--awx-sp-v);
    }
}

@container announcement (width < 24rem){
  .awx-announcement__actions .awx-button{
    width:100%;
  }
}

@container announcement (width > 42rem){
  picture,
  .awx-media{
    flex-basis:calc(50% - var(--awx-sp-h0-5)) !important;
    height:auto !important;
  }
}

@container announcement (width > 68rem){
  picture,
  .awx-media{
    flex-basis:480px !important;
  }
}

.awx-announcements__carousel{
  overflow:hidden;
  border-radius:var(--awx-border-radius);
  box-shadow:0 0 3em -0.2em var(--awx-color-dominant-shadow);
}

.awx-announcements__carousel .awx-carousel__controls{
    position:absolute;
    right:var(--awx-sp-h0-5);
    bottom:var(--awx-sp-v0-5);
  }