/* 
 * 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-announcements{
  container-type:inline-size;
  container-name:announcements;
}

.awx-announcements .awx-section__content{
    display:grid;
    grid-gap:var(--awx-sp-h);
    gap:var(--awx-sp-h);
    grid-template-columns:1fr;
  }

@container announcements (min-width: 48em){
  .awx-announcements--count-2 .awx-section__content,
  .awx-announcements--count-3 .awx-section__content{
    grid-template-columns:repeat(2, 1fr);
  }

  .awx-announcements--count-3 .awx-section__content > :first-child{
    grid-column:1 / -1;
  }

  .awx-announcements--count-4 .awx-section__content{
    grid-template-columns:repeat(2, 1fr);
  }
}

@container announcements (min-width: 80em){
  .awx-announcements--count-3 .awx-section__content{
    grid-template-columns:repeat(3, 1fr);
  }

  .awx-announcements--count-3 .awx-section__content > :first-child{
    grid-column:auto;
  }

  .awx-announcements--count-4 .awx-section__content{
    grid-template-columns:repeat(4, 1fr);
  }
}