/* ==========================================================================
   Hero banner (full-width single image row) + grey band below it
   ========================================================================== */

.hero__inner {
  padding: 0 15px;          /* column gutter */
  margin-bottom: 20px;      /* element bottom margin */
  text-align: center;
}

.hero__image {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* Grey band: 32px spacer + empty separator (1px + 20px margin) */
.band--grey {
  height: 53px;
  background-color: #cecdc1;
}

/* White spacer: two 32px "empty space" elements */
.band--spacer {
  height: 64px;
}

/* Stacked columns get a 35px bottom margin on small screens (theme rule) */
@media (max-width: 768px) {
  .band--spacer {
    height: 99px;
  }
}
@media (max-width: 767px) {
  .band--spacer {
    height: 135px;
  }
}