.gamed-hero-404 {
  min-height: calc(100vh - 178px);
}

.gamed-hero-404 .gamed-container {
  min-height: calc(100vh - 178px);
  display: flex;
  flex-direction: column;
}

.gamed-404-content {
  margin: auto;
  padding: 34px 0 84px;
  color: #fff;
  max-width: 720px;
  text-align: center;
}

.gamed-404-code {
  margin: 0;
  font-size: clamp(88px, 16vw, 200px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.02em;
}

.gamed-404-content h1 {
  margin: 22px 0 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 700;
}

.gamed-404-content p {
  margin: 16px auto 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  max-width: 620px;
}

.gamed-404-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}

.gamed-404-actions .gamed-pill-btn {
  margin-top: 0;
  min-width: 280px;
  padding-left: 30px;
  padding-right: 30px;
}

.gamed-404-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 24px;
  border-radius: 37px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.gamed-404-link:hover,
.gamed-404-link:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
  .gamed-hero-404,
  .gamed-hero-404 .gamed-container {
    min-height: auto;
  }

  .gamed-404-content {
    margin: 0;
    padding: 28px 0 64px;
  }

  .gamed-404-actions {
    margin-top: 24px;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .gamed-404-actions .gamed-pill-btn,
  .gamed-404-link {
    width: min(100%, 388px);
    justify-content: center;
  }
}