@design-tokens url('../../tokens/v2.json') format('style-dictionary3');

@define-mixin hero-banner-container {
    container-type: inline-size;
}
:has(> .x-hero-banner) {
    @mixin hero-banner-container;
}

@define-mixin hero-banner {
  position: relative;
}
.x-hero-banner {
  @mixin hero-banner;
}

@define-mixin hero-banner--wide-context {
  height: 55.5rem;
  width: 100%;
  display: block;
}
.x-hero-banner--wide-context {
  @mixin hero-banner--wide-context;
}

@define-mixin hero-banner--slim-context {
  height: auto;
  display: grid;
}
.x-hero-banner--slim-context {
  @mixin hero-banner--slim-context;
}

@define-mixin hero-banner-article {
  --inset-left: 48px;

  color: var(--global-color-primary--xx-dark);
  background-color: rgb( from design-token('color.gray.light-2x') r g b / 0.9 );
  z-index: 2;
  padding: 24px 84px 36px var(--inset-left);
  font-weight: bold;
}
.x-hero-banner__article {
  @mixin hero-banner-article;
}

@define-mixin hero-banner-article--wide-context {
  --container-gap: 0;

  position: absolute;
  left: 0;
  bottom: 50px;

  width: 610px;
  box-sizing: border-box;
  max-width: 100cqw;

  margin-left: calc(-1 * var(--inset-left) + var(--container-gap));
}
@define-mixin hero-banner-article--in-container {
  --container-gap: calc( var(--global-space--bootstrap-gap) / 2 );
}
.x-hero-banner--wide-context .x-hero-banner__article {
  @mixin hero-banner-article--wide-context;
}

@define-mixin hero-banner-title {
  margin-top: 0;
  padding-bottom: 14px;
  margin-bottom: 18px;

  font-size: 2.4rem;
  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
}
.x-hero-banner__title {
  @mixin hero-banner-title;
}

@define-mixin hero-banner-media {
  width: 100cqw;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.x-hero-banner__media {
  @mixin hero-banner-media;
}