header {
  padding-top: var(--header-height-md);
}

header nav.navbar {
  width: 100%;
}
header nav.navbar {
  height: var(--header-height-md);
  transition: background-color 0.2s ease-in-out;
  background-color: transparent;
}
header nav.navbar.scroll {
  background-color: #11111af0;
  /* height: calc(var(--header-height-md) - (var(--header-height-md) - var(--logo-size-md)) * 0.8); */
}

.navbar-brand img {
  width: var(--logo-size-md);
  aspect-ratio: 1;
}

@media screen and (max-width: 768px) {
  header {
    padding-top: var(--header-height);
  }
  header nav.navbar {
    height: var(--header-height);
  }
  /* header nav.navbar.scroll .container {
    height: calc(var(--header-height) - (var(--header-height) - var(--logo-size)) * 0.8);
  } */

  .navbar-brand {
    margin-left: 12px;
  }
  .navbar-toggler {
    margin-right: 12px;
  }
  header nav.navbar .navbar-collapse {
    background-color: #11111af0;
  }

  .navbar-brand img {
    width: var(--logo-size);
  }
}

/* Reset */
.navbar > .container {
  background: transparent !important;
  background-color: transparent !important;
}