:root {
  --event-stage-background-color: transparent;
  --event-stage-image-aspect-ratio: #{1440 / 440};
  --event-stage-image-max-width: #{$inner-container-max-width};

  @include use-responsive-sizing(--event-stage-inner-padding-block, responsive-map(xs 2rem, xl 4rem));
  @include use-responsive-sizing(--event-stage-inner-row-gap, responsive-map(xs 4rem, xl 6rem));
}

.event-stage {
  background-color: var(--event-stage-background-color);
}

.event-stage__image {
  --image-z-index: 1;

  aspect-ratio: var(--event-stage-image-aspect-ratio);
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-inline-size: var(--event-stage-image-max-width);
}

.event-stage__inner {
  column-gap: var(--gap);
  display: grid;
  padding-block: var(--event-stage-inner-padding-block);
  position: relative;
  row-gap: var(--event-stage-inner-row-gap);

  @include use-container();

  @include mq($from: l) {
    grid-template-columns: 1fr 1fr;
  }
}

.event-stage__content {
  display: flex;
  flex-direction: column;
  row-gap: var(--event-stage-inner-row-gap);

  @include mq($from: l) {
    padding-block-end: var(--event-stage-inner-row-gap);
  }
}

.event-stage__breadcrumb {
  flex-shrink: 0;
}

.event-stage__headline {
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  justify-content: center;
}

.event-stage__details {
  position: relative;

  @include mq($from: l) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.event-stage__details-box {
  @include mq($from: l) {
    position: relative;
    z-index: 3;
  }
}

.event-stage__inner:not(:first-child) .event-stage__details-box {
  @include mq($from: l) {
    margin-block-start: -25rem;
  }
}