My responsive image disappears behind column text on smaller screens

Question

My fixed hero image is responsive and looks great. It shows up nicely behind 2 of 3 columns when they scroll past it on small screens, but I cannot determine why it hides behind the 3rd column. The only difference in the third column is that there is an image with a link to it. The first column has a similar image but no link. But even the text in the 3rd column hides the image. I tried removing the body background color but that didn't help; it only left white instead. I've looked at similar questions but none of them seem to address my issue. Here is the hero image css, which works fine:

.hero-image {
  background-image: url("https://breakingtheirchains.com/images/images/girl2.png");
  background-color: black;
  height: 800px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;}

There is no bg color to the columns:

/* Create three equal columns that float next to each other */

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: auto;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
/* End column layout */

Thanks for any help. Here is the site page: https://breakingtheirchains.com/index.html.

Answer 1

Unset height on .hero-image:

.hero-image {
  background-image: url("https://breakingtheirchains.com/images/images/girl2.png");
  background-color: black;
  /* height: 800px; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}