.header-inner{
  width:calc(100% - 32px);
  max-width:1130px;
  margin:10px auto 0;
  padding:12px 28px;
}

.site-header{position:relative;isolation:isolate;overflow:hidden}
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:url('../images/death-bee-banner.jpg') center 42% / cover no-repeat;
  opacity:.2;
}
.site-header>.header-inner,.site-header>.intro{position:relative;z-index:1}

.stream-section{
  background-color:var(--deep);
  background-image:linear-gradient(rgba(12,12,36,.76),rgba(12,12,36,.87)),url('../images/stream-gaming-room.png');
  background-size:cover;
  background-position:center;
}

.community,.competition{
  color:#fff;
  background-color:var(--deep);
  background-image:linear-gradient(rgba(12,12,36,.78),rgba(12,12,36,.9)),url('../images/stream-gaming-room.png');
  background-size:cover;
  background-position:center;
}

.competition .lined-label{color:var(--gold)}
.competition .gold-button{background:var(--gold);color:#14120b}

.intro{
  width:calc(100% - 32px);
  max-width:1130px;
  margin:0 auto;
  padding:35px 8px 72px;
}

.join-header{min-width:154px;white-space:nowrap;text-align:center}

@media (min-width:1025px){
  .header-inner{
    min-height:152px;
    grid-template-columns:220px minmax(0,1fr) 154px;
    padding:0 28px;
  }

  .brand{width:200px;height:152px}
  .brand img{width:190px;height:118px}

  .main-nav{
    display:flex;
    height:152px;
    justify-content:center;
    align-items:stretch;
  }

  .main-nav a,
  .main-nav a:last-child{
    display:flex;
    align-items:center;
    height:128px;
    padding:0 12px;
    font-size:18px;
    letter-spacing:.55px;
    white-space:nowrap;
  }

  .join-header{align-self:center;margin-top:0;font-size:19px;padding:8px 16px}
}

@media (max-width:1024px) and (min-width:768px){
  .header-inner{display:flex}
  .main-nav{display:flex}
  .main-nav a:last-child{height:auto;padding:19px 10px}
}

@media (max-width:767px){
  .header-inner,.intro{width:100%;margin:0;padding-left:6%;padding-right:6%}
  .header-inner{padding-top:10px;padding-bottom:10px}
}
