@import url("../tools/media-queries.css");
@import url("../tools/x-hero-banner.css");

:has(> .c-hero-banner) {
    @mixin hero-banner-container;
}

.c-hero-banner {
  @mixin hero-banner;
}
@media (--medium-and-above) {
  .c-hero-banner {
    @mixin hero-banner--wide-context;
  }
  .c-hero-banner__article {
    @mixin hero-banner-article--wide-context;
  }
}
@media (--medium-and-below) {
  .c-hero-banner {
    @mixin hero-banner--slim-context;
  }
}

.c-hero-banner__article {
  @mixin hero-banner-article;
}
.c-hero-banner.container .c-hero-banner__article {
  @mixin hero-banner-article--in-container;
}

.c-hero-banner__title {
  @mixin hero-banner-title;
}
.c-hero-banner__media {
  @mixin hero-banner-media;
}