.hero-umbrella {
  width: min(54vw, 820px);
  right: 2vw;
  top: 17%;
  filter: none;
}

.hero-umbrella .canopy { fill: url(#hero-canopy-fill); stroke: url(#hero-gold); stroke-width: 2.4; }
.hero-umbrella .canopy-seam,
.hero-umbrella .engineered-ribs { fill: none; stroke: rgba(230,204,143,.72); stroke-width: 1.15; }
.hero-umbrella .engineered-ribs { stroke-width: .8; opacity: .72; }
.hero-umbrella .hero-mechanism circle,
.hero-umbrella .hero-mechanism path { fill: #091724; stroke: url(#hero-gold); stroke-width: 1.45; }
.hero-umbrella .straight-shaft,
.hero-umbrella .shaft-highlight,
.hero-umbrella .shaft-cap,
.hero-umbrella .finial { fill: none; stroke: url(#hero-gold); stroke-linecap: round; }
.hero-umbrella .straight-shaft { stroke-width: 9; }
.hero-umbrella .shaft-highlight { stroke: rgba(255,239,192,.72); stroke-width: 1.25; }
.hero-umbrella .shaft-cap { stroke-width: 4; }
.hero-umbrella .finial { fill: url(#hero-gold); stroke-width: 1.2; }

.hero-umbrella img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
  opacity: 1;
  object-fit: contain;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(215,174,86,.12));
}

@media (max-width: 1100px) {
  .hero-umbrella {
    width: min(58vw, 720px);
    right: 1vw;
    top: 22%;
  }
}

@media (max-width: 800px) {
  .hero-umbrella {
    width: 92vw;
    right: 4vw;
    top: 40%;
    opacity: 0.46;
  }

  .hero-umbrella img {
    opacity: 0.88;
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.32));
  }
}

@media (max-width: 520px) {
  .hero-umbrella {
    width: 94vw;
    right: 3vw;
    top: 46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-umbrella {
    animation: none;
  }
}