body {
  /*display: flex;*/
}

header {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  background: #fff; /*var(--grape-0);*/
  min-height: 100vh;
}

.hero {
  padding: var(--size-10);
  display: grid;
  gap: var(--size-5);
}

.hero-message {
  display: grid;
  grid-template-columns: max-content;
  color: var(--gray-9);
  line-height: var(--font-lineheight-0);
}

.hero-message > div:last-child {
  color: var(--pink-7);
}

.under-hero {
  color: var(--gray-7);
  font-size: var(--font-size-4);
  margin-block-end: var(--size-3);
}

.button-list {
  display: flex;
  gap: var(--size-3);
}

button, a {
  background: white;
  color: var(--pink-8);
  font-size: var(--font-size-3);
  padding-inline: var(--size-8);
  padding-block: var(--size-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

button.primary, a.primary {
  background: var(--pink-8);
  text-shadow: 0 1px 0 var(--pink-9);
  color: white;
}

button.primary:hover, a.primary:hover {
  background: var(--pink-7);
  text-decoration: none;
}

.promo-art {
  align-self: stretch;
}

.promo-art > img {
  block-size: 100%;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  header {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .promo-art {
    /*display: none;*/
    order: 1;
  }
  .promo-art > img {
    block-size: auto;
    object-fit: contain;
    width: 50%;
    margin: var(--size-4) auto;
  }
  h1 {
    font-size: var(--font-size-6);
  }
  .under-hero {
    font-size: var(--font-size-2);
  }
  button, a {
    font-size: var(--font-size-1);
    display: block;
    width: 100%;
  }
  .hero {
    padding: 0 var(--size-8) var(--size-4);
    order: 2;
  }
  .hero-message {
    display: block;
    margin: 0 auto;
  }
}