.container {
  position: relative;
}

.background,
.overlay {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.background {
  position: absolute;
  z-index: var(--layer-background);
}

.hasChildren {
  background-color: var(--banner-image-fade);
}

.overlay {
  /* This allows us to size the parent container relative to the content */
  min-block-size: 400px;
  z-index: var(--layer-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* Add a top padding for the header */
  padding-block-start: 82px;

  @media (--medium) {
    padding-block-start: 41px;
  }
}
