Sticky Header beim Scrollen Logo verkleinern

[Jensen]

Hallo, bin neu im Forum und habe sofort eine Frage ;-)

Ich habe ein Codeschnipsel, mit dem ich einen Sticky-Header für mein Logo + Menü erstellt habe, das beim Scrollen in der Höhe kleiner wird. Es funktioniert gut.

Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?

:root {
  --logo-oben-tagline-height: 120px;
  --logo-oben-tagline-inside-height: 80px;
  --header-height-difference: calc(
    var(--logo-oben-tagline-height) - var(--logo-oben-tagline-inside-height)
  );
  --logo-oben-tagline-bg: #fff;
}
#logo-oben-tagline {height: var(--logo-oben-tagline-height);
  position: sticky;
  top: calc(
    var(--header-height-difference) * -1
  ); /* Multiply by -1 to get a negative value */
  display: flex;
  align-items: center;

  /* Other */
  background-color: var(--logo-oben-tagline-bg);
  box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
   z-index: 999 !important;
  }

#logo-oben-tagline .inside {
   	width:1200px;
    max-width:1200px;
    margin-right:auto;
    margin-left:auto;
    text-align:center;

    height: var(--logo-oben-tagline-inside-height);
  position: sticky;
  top: 0;

  /* Other */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo-oben-tagline img {
  display: block;
  height: calc(var(--logo-oben-tagline-inside-height) - 20px);

}

Über jede Hilfe / Ansatz wäre ich dankbar.

Viele Grüße Jensen