.container {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
}

.site-header__inner {
  position: relative;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-warm);
}

.site-footer__inner {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-6);
}

.hero {
  padding-block: 3.5rem;
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 60rem) {
  .hero {
    padding-block: var(--space-24);
  }

  .hero__grid {
    grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
    align-items: center;
    gap: var(--space-16);
  }
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, .85fr) minmax(32rem, 1.15fr);
  }
}