.river-scene .data-centre-campus {
  position: absolute;
  z-index: 1;
  height: auto;
  opacity: .72;
  filter: saturate(.78) drop-shadow(0 4px 5px rgba(17, 51, 48, .12));
}

.river-scene .campus-right {
  top: 39%;
  right: 5%;
  width: clamp(9rem, 42%, 12rem);
}

.river-scene .campus-left-tree {
  top: 46%;
  left: 2%;
  width: clamp(6.5rem, 27%, 8.5rem);
  opacity: .62;
}

.river-scene .campus-left-hill {
  top: 39%;
  left: 28%;
  width: clamp(6.5rem, 30%, 9rem);
  opacity: .68;
}

.river-scene .tree {
  z-index: 2;
}

.river-scene .water {
  z-index: 3;
}

.river-scene .river-rock {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -9%;
  width: clamp(19rem, 76%, 27rem);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 8px rgba(17, 51, 48, .22));
}

.river-scene .animal-pair {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 12%;
  width: clamp(16rem, 66%, 23rem);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18));
}

@media (max-width: 500px) {
  .river-scene .campus-right {
    top: 39%;
    right: 6%;
    width: min(44%, 10rem);
  }

  .river-scene .campus-left-tree {
    top: 46%;
    left: 2%;
    width: min(30%, 6.5rem);
  }

  .river-scene .campus-left-hill {
    top: 39%;
    left: 27%;
    width: min(32%, 7rem);
  }

  .river-scene .river-rock {
    bottom: -7%;
    width: min(79%, 22rem);
  }

  .river-scene .animal-pair {
    left: 50%;
    bottom: 13%;
    width: min(70%, 20rem);
  }
}