.about-hero-cone {
  z-index: -10;
  mix-blend-mode: screen;
}

.about-hero-cone > div {
  position: absolute;
  inset: 0;
}

.about-hero-cone .cone-l1 {
  background: radial-gradient(ellipse 13% 16% at 78% 26%, rgba(220,235,255,.32) 0%, rgba(220,235,255,.018) 40%, transparent 56%);
  filter: blur(12px);
}

.about-hero-cone .cone-l2 {
  background: radial-gradient(ellipse 17% 50% at 78% 60%, rgba(205,222,255,.07) 0%, rgba(205,222,255,.008) 38%, transparent 44%);
  filter: blur(28px);
}

.about-hero-cone .cone-l3 {
  background: radial-gradient(ellipse 160% 280% at 95% 50%, rgba(195,215,255,.018) 0%, rgba(195,215,255,.005) 40%, transparent 60%);
  filter: blur(80px);
}

.streetlamp-dust {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}

@media (min-width: 1024px) {
  .about-hero-lamp-gap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5rem;       background: linear-gradient(to right, transparent 0%, #101d33 40%);
    pointer-events: none;
  }

  .about-hero-lamp-wrap {
    filter: none;
  }

  .about-hero-lamp-wrap img {
    filter: none;
  }

  .about-hero-studio-hide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6%;          background: #101d33;
    pointer-events: none;
  }
}

@media (min-width: 1280px) {
  .about-hero-lamp-gap {
    width: 7rem;
  }
}