/* 
 * 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-block-cta{
  padding:var(--awx-sp-v2) 0;
  color:var(--awx-color-text);
  background-color:var(--awx-white);
  container-type:inline-size;
  container-name:block-cta;
}

.awx-block-cta .awx-button{
    width:100%;
    margin-top:auto;
    font-size:0.875rem;
  }

.awx-block-cta__inner{
  max-width:calc(var(--awx-body-max-width) - var(--awx-sp-h3)*2);
  margin-right:var(--awx-sp-h1-5);
  margin-left:var(--awx-sp-h1-5);
}

.awx-block-cta__title{
  margin-bottom:var(--awx-sp-v);
  font-size:1.5rem;
}

.awx-block-cta__description{
  margin-top:var(--awx-sp-v);
  margin-bottom:var(--awx-sp-v2);
  font-size:1.125rem;

}

.awx-block-cta__description p:first-child{
    margin-top:0;
  }

.awx-block-cta__description p:last-child{
    margin-bottom:0;
  }

.awx-block-cta--sub-level{
  margin-bottom:var(--awx-sp-v2);
  border-radius:var(--awx-border-radius);

}

.awx-block-cta--sub-level .awx-block-cta__inner{
    display:flex;
    flex-direction:column;
    height:100%;
  }

.awx-block-cta--sub-level .awx-block-cta__title{
    font-size:1.125rem;
    line-height:var(--awx-line-height);
  }

.awx-block-cta--sub-level .awx-block-cta__description{
    font-size:1rem;
  }

.awx-block-cta--sub-level .awx-button{
    display:flex;
    align-items:center;
    justify-content:center;
    height:auto;
    margin:auto 0 0;
    padding-top:0.6em;
    padding-bottom:0.6em;
    line-height:var(--awx-line-height);
  }

.awx-block-cta--sub-level .awx-button[target="_blank"]::after{
      width:1.2em;
      margin-right:0;
    }

.awx-block-cta--sub-level .awx-button__label{
    white-space:normal;
    text-wrap:balance;
  }

@container block-cta (width < 23rem){
    .awx-block-cta--sub-level .awx-block-cta__title{
      margin-bottom:var(--awx-sp-v);
    }

    .awx-block-cta--sub-level .awx-block-cta__description{
      display:none;
    }
}

@container block-cta (width < 26rem){
    .awx-block-cta--sub-level .awx-block-cta__description{
      font-size:0.875em;
    }
}

.awx-block-cta--light-gray{
  color:var(--awx-color-text);
  background-color:var(--awx-color-dominant-lighter);
}

.awx-block-cta--dark{
  color:var(--awx-color-text-light);
  background-color:var(--awx-color-dominant);
}

@media (min-width: 64em){
  .awx-block-cta{
    padding-top:var(--awx-sp-v3);
    padding-bottom:var(--awx-sp-v3);
  }

    .awx-block-cta .awx-button{
      grid-area:right;
      justify-self:end;
      width:auto;
      font-size:1rem;
    }

  .awx-block-cta__inner{
    display:grid;
    grid-template-areas:"left-top right" "left-bottom right";
    grid-template-columns:auto 1fr;
    margin:0 auto;
    padding-right:var(--awx-sp-h3);
    padding-left:var(--awx-sp-h3);
    grid-gap:0 var(--awx-sp-h);
    gap:0 var(--awx-sp-h);
  }

  .awx-block-cta__title{
    grid-area:left-top;
    font-size:2.25rem;
  }

  .awx-block-cta__description{
    grid-area:left-bottom;
    margin-bottom:0;
  }

  .awx-block-cta__title,
  .awx-block-cta__description{
    max-width:50rem;
  }

  .awx-block-cta--sub-level{
    margin-bottom:0;
    padding-top:var(--awx-sp-v1-5);
    padding-bottom:var(--awx-sp-v2);
  }

    .awx-block-cta--sub-level .awx-block-cta__inner{
      padding-right:var(--awx-sp-h1-5);
      padding-left:var(--awx-sp-h1-5);
    }

    .awx-block-cta--sub-level .awx-block-cta__title{
      margin-bottom:0;
      font-size:1.25rem;
    }

    .awx-block-cta--sub-level .awx-block-cta__description{
      margin-bottom:var(--awx-sp-v2);
    }
}

@media (min-width: 64em){

  .awx-block-cta .awx-button{
    -ms-grid-row:1;
    -ms-grid-row-span:3;
    -ms-grid-column:3;
  }

  .awx-block-cta__title{
    -ms-grid-row:1;
    -ms-grid-column:1;
  }

  .awx-block-cta__description{
    -ms-grid-row:3;
    -ms-grid-column:1;
  }
}