.hero-logo-mode {
  background: #000;
}

.hero-logo-mode .hero-photo {
  position: absolute;
  right: 0;
  top: 0;
  width: 58%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  transform: none;
  border-radius: 0;
  box-shadow: none;
}

.hero-logo-mode .hero-overlay {
  background: linear-gradient(
    90deg,
    #000 0%,
    rgba(0, 0, 0, 0.98) 34%,
    rgba(0, 0, 0, 0.72) 51%,
    rgba(0, 0, 0, 0.08) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

@media (max-width: 760px) {
  .hero-logo-mode .hero-photo {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 55%;
    transform: none;
    object-position: center bottom;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-logo-mode .hero-overlay {
    background: linear-gradient(
      180deg,
      #000 0%,
      rgba(0, 0, 0, 0.98) 48%,
      rgba(0, 0, 0, 0.58) 68%,
      rgba(0, 0, 0, 0.08) 100%
    );
  }
}

@media (max-width: 520px) {
  .hero-logo-mode .hero-photo {
    bottom: 0;
    width: 100%;
    height: 52%;
  }
  .hero-logo-mode .hero-overlay {
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.99) 48%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.08) 100%);
  }
}