.container {
  isolation: isolate;
  display: block grid;

  container-type: inline-size;
}

.header {
  position: relative;
  block-size: 80cqb;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(
      calc(atan(var(--ratio))),
      var(--surface-2) 20em,
      transparent 90%
    );
  }

  & > .background {
    position: absolute;
    inset: 0;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
}