.newsletter {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 560px);
  gap: 48px;
  align-items: center;
  padding: 72px max(48px, calc((100vw - 1280px) / 2));
  background: var(--ink);
  color: var(--rice);
}

.newsletter small { font: 10px var(--font-latin-sans); letter-spacing: .3em; color: var(--gold); }
.newsletter h2 { margin: 10px 0; font: 400 34px var(--font-title); letter-spacing: .18em; }
.newsletter p { margin: 0; color: rgba(250, 246, 236, .72); }
.newsletter form { display: flex; }
.newsletter label { display: contents; }
.newsletter input { min-width: 0; flex: 1; padding: 14px 16px; border: 1px solid rgba(250, 246, 236, .35); border-right: 0; background: transparent; color: var(--rice); }
.newsletter button { min-width: 120px; border: 1px solid var(--gold); background: var(--gold); color: var(--ink); letter-spacing: .16em; }
.newsletter__result, .newsletter__error { padding: 18px; border: 1px solid rgba(250, 246, 236, .25); }
.newsletter__error { color: #ffd5d5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .newsletter { grid-template-columns: 1fr; padding: 56px 24px; }
  .newsletter form { flex-direction: column; }
  .newsletter input { border-right: 1px solid rgba(250, 246, 236, .35); }
  .newsletter button { min-height: 48px; }
}