.header-banner {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  > * {
    padding: calc(var(--spacing)*8);
  }
}

.header-banner h1 {
  z-index: 2;
  position: relative;
  text-align: center;
}

/*SM*/
@media (width >= 640px) {
  .header-banner > * {
    padding: calc(var(--spacing)*12)
  }
}

/*MD*/
@media (width >= 768px) {
  .header-banner > * {
    padding: calc(var(--spacing)*14)
  }
  .header-banner h1 {
    text-align: left;
  }
}

/*LG*/
@media (width >= 1024px) and (height > 800px) {
  .header-banner > * {
    padding: calc(var(--spacing)*22)
  }
}