.page {
  height: 100svh;
  min-height: 620px;
  padding: 0 5.5vw 32px;
  display: grid;
  grid-template-rows: 80px minmax(0,1fr);
  position: relative;
  isolation: isolate
}

.brand {
  display: flex;
  align-items: center;
  font-size: 20px;
  letter-spacing: .02em
}

.hero {
  display: grid;
  align-items: center;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto
}

.copy {
  min-width: 0;
  position: relative
}

.copy h1 {
  font-size: clamp(40px,4.55vw,68px);
  line-height: 1.17;
  letter-spacing: -.04em;
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere
}

.copy p {
  font-size: 18px;
  line-height: 1.85;
  margin: 28px 0 0;
  max-width: 36em;
  color: inherit;
  opacity: .87
}

.art {
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 620px
}

::selection {
  background: var(--accent);
  color: var(--bg)
}

@media(max-height:780px) and (min-width:768px) {
  .copy h1 {
    font-size: clamp(38px,4.1vw,60px)
  }
  .copy p {
    font-size: 17px;
    margin-top: 23px
  }
  .page {
    grid-template-rows: 72px minmax(0,1fr);
    padding-bottom: 24px
  }
  .art {
    max-height: 510px
  }
}

@media(max-width:767px) {
  .page {
    height: 100svh;
    min-height: 700px;
    padding: 0 26px 24px;
    grid-template-rows: 65px minmax(0,1fr)
  }
  .brand {
    font-size: 18px
  }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 24px
  }
  .copy {
    order: 1;
    max-width: none!important
  }
  .copy h1 {
    font-size: 38px!important;
    line-height: 1.18;
    letter-spacing: -.04em
  }
  .copy p {
    font-size: 15px!important;
    line-height: 1.85;
    margin-top: 20px;
    max-width: 100%;
    opacity: .9
  }
  .art {
    order: 2;
    height: 260px;
    flex: none;
    max-height: none;
    align-self: center
  }
  .art img {
    max-height: 100%
  }
}

@media(max-width:360px) {
  .page {
    padding-left: 22px;
    padding-right: 22px
  }
  .copy h1 {
    font-size: 34px!important
  }
  .copy p {
    font-size: 14px!important
  }
  .art {
    height: 235px!important
  }
}

@media(max-width:767px) and (max-height:740px) {
  .hero {
    gap: 16px
  }
  .copy h1 {
    font-size: 34px!important
  }
  .copy p {
    font-size: 14px!important;
    margin-top: 16px
  }
  .art {
    height: 210px!important
  }
  .page {
    min-height: 660px;
    grid-template-rows: 58px minmax(0,1fr)
  }
}