.header {
  width: 100%;
  min-height: min(100vh, 520px);
  padding: 88px 16px 16px 16px;
  position: relative;
}

@media (min-width: 360px) and (max-width: 1024px) {
  .header {
    overflow-x: clip;
  }
}

.header > :not(.children) {
  z-index: 1;
}

.children {
  display: contents;
}

.h1-section {
  gap: 30px;
}

.tag {
  background: var(--page-bg);
  color: var(--page-text);
  border-radius: 2px;
  margin-bottom: 10px;
  margin-top: 16px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 120%;
  letter-spacing: 0.24px;
  font-family: var(--ens-mono), monospace;
}

.h1 {
  color: var(--page-text);
  white-space: pre;
  max-width: 16ch;
}

.p {
  color: var(--ens-medium-blue);
  width: 100%;

  max-width: 320px;
}

.h1,
.p {
  text-align: center;
}

.feelBetter {
  font-family: var(--ens-semi-mono);
  letter-spacing: -3.72px;
}

.feelBetter::before {
  content: "[";
  color: var(--page-bg);
}

.feelBetter::after {
  content: "]";
  color: var(--page-bg);
}

.cta {
  flex-flow: wrap;
  gap: 10px;

  margin-top: 30px;
}

.cta a:first-child {
  background: var(--page-text);
  color: var(--ens-gray-2);
}

.cta a {
  background: var(--page-bg);
  color: var(--page-text);

  width: 100%;
}

.cta a:hover {
  color: var(--page-text-hover);
  background: var(--page-bg-hover, var(--page-bg));
}

.cta a:first-child:hover {
  background: var(--page-text-hover);
  color: var(--page-bg);
}

@media (min-width: 412px) {
  .p {
    max-width: 380px;
  }
}

@media (min-width: 640px) {
  .cta {
    gap: 20px;
    margin-top: 32px;
  }
  .cta a {
    width: fit-content;
  }
}

@media (min-width: 768px) {
  .header {
    min-height: min(80vh, 560px);
    padding: 88px 16px 32px 16px;
  }
  .p {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  .header {
    min-height: min(80vh, 830px);
    padding: 121px 0px 122px 0px;
  }
  .h1-section {
    gap: 40px;
  }
  .cta {
    margin-top: 80px;
  }
  .tag {
    margin-bottom: 20px;
    margin-top: 38px;
  }
  .p {
    max-width: 550px;
  }
}
