@media (max-width: 639px) {
  .hero-band {
    max-width: 100%;
    overflow: hidden;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero-band .container {
    width: 100%;
    max-width: 280px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-band h1 {
    max-width: 100%;
    font-size: 36px;
    line-height: 44px;
    overflow-wrap: normal;
  }

  .hero-band p {
    max-width: 100%;
    font-size: 16px;
    line-height: 26px;
    overflow-wrap: anywhere;
  }

  .hero-chip {
    left: 310px;
    right: auto;
    top: 74px;
    width: 72px;
    height: 72px;
    opacity: 0.14;
    box-shadow: inset 0 0 0 2px rgba(233, 221, 199, 0.28),
      inset 0 0 0 10px #ff7a00,
      inset 0 0 0 20px rgba(49, 18, 65, 0.88),
      0 18px 44px rgba(0, 0, 0, 0.42);
  }

  .hero-chip-logo {
    width: 38px;
    height: 38px;
  }

  .hero-chip::before {
    inset: 11px;
    border-width: 2px;
    box-shadow: 0 0 0 5px #141416, 0 0 0 8px #ff7a00;
  }

  .hero-chip::after {
    inset: 15px;
    -webkit-mask: radial-gradient(circle, transparent 0 17px, #000 18px 22px, transparent 23px);
    mask: radial-gradient(circle, transparent 0 17px, #000 18px 22px, transparent 23px);
  }

  .hero-prop {
    right: -92px;
    opacity: 0.1;
  }
}

@media (max-width: 340px) {
  .hero-chip {
    left: 262px;
    top: 92px;
    width: 58px;
    height: 58px;
    opacity: 0.13;
  }

  .hero-chip-logo {
    width: 31px;
    height: 31px;
  }

  .hero-chip::before {
    inset: 10px;
  }

  .hero-chip::after {
    inset: 13px;
    -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 16px 20px, transparent 21px);
    mask: radial-gradient(circle, transparent 0 15px, #000 16px 20px, transparent 21px);
  }
}