html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

@media (max-width: 900px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
}

.hero-bg {
  background:
    linear-gradient(90deg, rgba(0, 16, 22, 0.45) 0%, rgba(0, 18, 26, 0.18) 46%, rgba(0, 16, 22, 0.08) 100%),
    url("images/hero-bg.png") center / cover no-repeat,
    #00131b;
}

@media (max-width: 900px) {
  .hero-bg {
    background:
      linear-gradient(180deg, rgba(0, 17, 24, 0.1) 0%, rgba(0, 13, 19, 0.58) 50%, rgba(0, 13, 19, 0.94) 100%),
      url("images/hero-bg.png") 71% top / cover no-repeat,
      #00131b;
  }
}

@media (min-width: 901px) {
  .conversion-desktop {
    display: grid;
    grid-template-areas:
      "portrait author"
      "portrait form";
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: clamp(24px, 1.7vw, 32px);
    align-items: start;
  }

  .conversion-portrait {
    grid-area: portrait;
  }

  .conversion-author {
    grid-area: author;
  }

  .conversion-form {
    grid-area: form;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  .conversion-desktop {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

.hero-copy-desktop .subhead-order {
  order: 2;
}

.hero-copy-desktop .accent-order {
  order: 3;
}

@media (max-width: 900px) {
  .hero-copy-desktop .subhead-order,
  .hero-copy-desktop .accent-order {
    order: initial;
  }
}