.site-header {
  background: var(--navy);
  color: white;
}

.site-header.is-scrolled {
  background: var(--navy);
  border-color: #ffffff24;
  box-shadow: 0 5px 25px #11163340;
}

.header-message {
  color: white;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .065em;
  line-height: 1.3;
  text-transform: uppercase;
}

.header-intro {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header-event-logo {
  display: block;
  width: 132px;
  flex: 0 0 auto;
}

.header-event-logo img {
  width: 100%;
  height: auto;
}

.header-intro .header-message {
  display: none;
}

.site-header .button {
  background: var(--blue);
  color: white;
}

.site-header .button:hover {
  background: #1785bf;
}

.hero-presents {
  display: grid;
  justify-items: center;
  width: 170px;
  padding: 13px 14px 11px;
  border-radius: 8px;
  background: var(--navy);
  margin-bottom: 26px;
}

.hero-presents img {
  width: 100%;
}

.hero-presents span {
  color: white;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-event-logo {
  width: min(100%, 360px);
  /* Compensa a pequena margem transparente do próprio arquivo. */
  margin: 0 0 30px -3px;
}

.hero-copy > .eyebrow {
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .header-event-logo {
    width: 150px;
  }

  .header-intro .header-message {
    display: block;
    margin-left: 22px;
  }

  .hero-presents {
    width: 205px;
    padding: 16px 18px 13px;
    margin-bottom: 32px;
  }

  .hero-event-logo {
    width: 380px;
    margin: 0 0 34px -4px;
  }
}