:root {
  --clutchhub-hero-height: 184px;
  --clutchhub-hero-cut: 18px;
}

.games-v2-hero,
.lfg-match-hero,
.teams-d1-hero,
.chat-premium-heading,
.premium-hero,
.page-hero-notifications {
  box-sizing: border-box;
  min-height: var(--clutchhub-hero-height) !important;
  height: var(--clutchhub-hero-height);
  border: 1px solid rgba(211,225,237,.82) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--clutchhub-hero-cut) 0,
    calc(100% - var(--clutchhub-hero-cut)) 0,
    100% var(--clutchhub-hero-cut),
    100% calc(100% - var(--clutchhub-hero-cut)),
    calc(100% - var(--clutchhub-hero-cut)) 100%,
    var(--clutchhub-hero-cut) 100%,
    0 calc(100% - var(--clutchhub-hero-cut)),
    0 var(--clutchhub-hero-cut)
  );
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: 0 10px 28px rgba(31,57,86,.08) !important;
  overflow: hidden;
}

.games-v2-hero {
  grid-template-columns: 1fr !important;
  grid-template-rows: var(--clutchhub-hero-height) !important;
  display: grid !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 46%, rgba(255,255,255,0) 64%),
    url("/assets/page-heroes/games-editorial-head-v1.png") !important;
}

.games-v2-hero-copy {
  box-sizing: border-box !important;
  width: 48% !important;
  min-height: 0 !important;
  height: var(--clutchhub-hero-height) !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 14px 38px !important;
  overflow: hidden !important;
}

.games-v2-hero-copy h1 {
  margin: 0 !important;
  font-size: clamp(29px, 3.1vw, 41px) !important;
  line-height: .88 !important;
}

.games-v2-hero-copy p {
  margin: 0 !important;
  font-size: 8px !important;
  line-height: 1.3 !important;
}

.games-v2-hero-copy label {
  min-height: 34px !important;
  height: 34px !important;
  margin-top: 1px !important;
  padding: 0 12px !important;
}

.games-v2-hero-covers {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.lfg-match-hero {
  grid-template-columns: minmax(0, 470px) auto;
  justify-content: start;
  gap: 14px;
  padding: 19px 38px !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 46%, rgba(255,255,255,0) 64%),
    url("/assets/page-heroes/lfg-editorial-head-v1.png") !important;
}

.lfg-match-hero > div {
  min-width: 0;
}

.lfg-match-hero h1 {
  margin: 4px 0;
  font-size: clamp(29px, 3vw, 41px);
}

.lfg-match-hero p {
  max-width: 455px;
  margin: 0 0 6px;
  font-size: 9px;
}

.lfg-match-hero > button {
  align-self: end;
  min-height: 38px;
}

.teams-d1-hero {
  align-items: center;
  padding: 16px 38px !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 46%, rgba(255,255,255,0) 64%),
    url("/assets/page-heroes/teams-editorial-head-v1.png") !important;
}

.teams-d1-hero > div {
  width: 48%;
}

.teams-d1-hero h1 {
  margin: 3px 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: .88;
}

.teams-d1-hero p {
  margin: 4px 0 7px;
  font-size: 8px;
  line-height: 1.35;
}

.teams-d1-actions {
  gap: 6px;
}

.teams-d1-actions .button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 8px;
}

.teams-d1-goal {
  margin-top: 4px !important;
  font-size: 6px !important;
}

.chat-premium-heading {
  padding: 24px 38px !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 46%, rgba(255,255,255,0) 64%),
    url("/assets/page-heroes/chat-editorial-head-v1.png") !important;
}

.chat-premium-heading > div {
  max-width: 48%;
}

.chat-premium-heading h1 {
  font-size: clamp(29px, 3.3vw, 43px);
}

.chat-premium-heading p {
  font-size: 10px;
}

.chat-live-state {
  z-index: 2;
  margin-left: auto;
}

.premium-hero {
  grid-template-columns: auto minmax(0, 620px) auto;
  justify-content: start;
  gap: 15px !important;
  padding: 20px 38px !important;
  color: #17263d !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 46%, rgba(255,255,255,0) 64%),
    url("/assets/page-heroes/premium-editorial-head-v1.png") !important;
}

.premium-hero h1 {
  margin: 4px 0;
  font-size: clamp(27px, 2.9vw, 39px);
}

.premium-hero p {
  max-width: 560px;
  margin: 0;
  color: #5d6c81 !important;
  font-size: 9px;
}

.premium-crown {
  color: #f3a51e !important;
  background: rgba(255,255,255,.88) !important;
  border-color: #ffd69c !important;
}

.premium-hero-actions {
  z-index: 2;
}

.page-hero-notifications {
  padding: 24px 38px !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 46%, rgba(255,255,255,0) 64%),
    url("/assets/page-heroes/notifications-editorial-head-v1.png") !important;
}

.page-hero-notifications > div {
  max-width: 48%;
}

.page-hero-notifications h1 {
  font-size: clamp(29px, 3.2vw, 43px);
}

.page-hero-notifications p {
  font-size: 10px;
}

.page-hero-notifications > button {
  z-index: 2;
  margin-left: auto;
}

.profile-command-hero,
.public-player-hero,
.friends-hero,
.trust-page-hero {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.38) 0 42%, rgba(255,255,255,.05) 67%),
    url("/assets/page-heroes/profile-editorial-head-v1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.profile-command-cover,
.profile-command-theme {
  opacity: .12 !important;
}

.team-hub-hero {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.35) 0 44%, rgba(255,255,255,.03) 68%),
    url("/assets/page-heroes/teams-editorial-head-v1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.management-console-hero {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.34) 0 44%, rgba(255,255,255,.04) 68%),
    url("/assets/page-heroes/notifications-editorial-head-v1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

@media (max-width: 760px) {
  :root {
    --clutchhub-hero-height: 154px;
    --clutchhub-hero-cut: 14px;
  }

  .games-v2-hero-copy,
  .lfg-match-hero,
  .teams-d1-hero,
  .chat-premium-heading,
  .premium-hero,
  .page-hero-notifications {
    padding: 17px 18px !important;
    background-position: 61% center !important;
  }

  .games-v2-hero-copy,
  .teams-d1-hero > div,
  .chat-premium-heading > div,
  .page-hero-notifications > div {
    width: 72% !important;
    max-width: 72% !important;
  }

  .games-v2-hero-copy p,
  .lfg-match-hero p,
  .teams-d1-hero p,
  .premium-hero p,
  .chat-premium-heading p,
  .page-hero-notifications p {
    display: none;
  }

  .games-v2-hero-copy h1,
  .lfg-match-hero h1,
  .teams-d1-hero h1,
  .premium-hero h1,
  .chat-premium-heading h1,
  .page-hero-notifications h1 {
    font-size: clamp(24px, 7vw, 34px);
  }

  .games-v2-hero-copy label {
    min-height: 32px !important;
    height: 32px !important;
  }

  .lfg-match-hero {
    grid-template-columns: minmax(0, 72%);
  }

  .lfg-match-hero > button,
  .premium-hero-actions,
  .page-hero-notifications > button,
  .chat-live-state {
    display: none !important;
  }

  .premium-hero {
    grid-template-columns: auto minmax(0, 72%);
  }
}