@media only screen and (min-width: 0) {
  .component.folded-hero {
    position: relative;
    overflow: hidden;
    height: 310px;
  }
  .component.folded-hero .container {
    height: 100%;
    position: relative;
  }
  .component.folded-hero .interior {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  .component.folded-hero h1 {
    color: #fff;
  }
}
@media only screen and (min-width: 0) and (max-width: 639px) {
  .component.folded-hero .container {
    overflow: hidden;
  }
  .component.folded-hero .interior {
    top: 70%; /* new */
  }
}
@media only screen and (min-width: 640px) {
  .component.folded-hero {
    height: 450px;
  }

}
@media only screen and (min-width: 1024px) {
  .component.folded-hero {
    margin-top: -35px;
    height: 750px;
  }
}

/*Apply Overlap Styles*/
@media only screen and (min-width: 0px) {
  .folded-hero + div.component {
    background: transparent;
    margin-top: 0;
  }
  .folded-hero + div.component > .interior > .grid-container {
    background: #fff;
    position: relative;
  }
  .folded-hero + div.component > .interior > .grid-container > .grid-x {
    padding-top: 16px;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  .folded-hero + div.component > .interior > .grid-container > .grid-x:before {
    content: '';
    height: 100%;
    width: 100%;
    background: #fff;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 0;
  }
  .folded-hero + div.component > .interior > .grid-container > .grid-x:after {
    content: '';
    height: 100%;
    width: 50%;
    background: #fff;
    position: absolute;
    right: -2.5%;
    top: 0;
    z-index: 0;
  }
  .folded-hero + div.component > .interior > .grid-container > .grid-x > .cell {
    z-index: 1;
  }
}
@media only screen and (min-width: 640px) {
  .folded-hero + div.component {
    margin-top: -85px;
  }
  .folded-hero + div.component > .interior > .grid-container > .grid-x {
    padding-top: 48px;
  }
}
@media only screen and (min-width: 1024px) {
  .folded-hero + div.component {
    margin-top: -160px;
  }
  .folded-hero + div.component > .interior > .grid-container > .grid-x {
    padding-top: 64px;
  }
  .folded-hero.acgt + div.component > .interior > .grid-container::after {
    content: url(/themes/custom/nhgri/assets/patterns/pattern-acgt-grid.svg);
    width: 350px;
    height: auto;
    position: absolute;
    z-index: 0;
    right: -100px;
    top: -150px;
  }
}