Stacking Context behavior

  .image-container#water {
    position: relative;
    z-index: 1;
    background: center / 70% no-repeat url("/water-1.svg") t.$clr-brand-dark;

    .drip-drop {
      position: absolute;
      display: block;
      content: "";
      top: 1rem;
      left: 2rem;
      width: 5rem;
      height: 5rem;
      border-radius: 100%;
      background: center / 50% no-repeat url("/drip-drop.svg")
        t.$clr-brand-dark;

      &::after {
        position: absolute;
        display: block;
        content: "";
        bottom: -3px;
        right: -3px;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: t.$clr-brand-muted;
        border-radius: 100%;
      }
    }
  }