#brx-header {
    transition: transform var(--trs-1) ease;

    &.brx-sticky {
        left: 0;
        position: sticky;
        right: 0;
        top: 0;
        z-index: 998;

        &.slide-up { transform: translateY(-100%)}
        &.scrolling {
            background: var(--card-bg);
            &:not(.slide-up) { box-shadow: var(--card-shd)}
        }
    }


}


/* logo menu */
#logos {
  color: var(--hd);
  width: clamp(8em, 20.83vw, 11em);
  order: -2;
}

/* Top bar header */
.top-bar{
  background:var(--neg-alt-drk);
  p {color: var(--ntl-100)}
}

/* PC menu */
#yamburger {display: none}
#menu-links {gap:var(--gpm-m)}

/*Lang switcher */
.lang-item {
    list-style-type: none;
    img{width:1.75em!important; height:1.25em!important}
    &.current-lang{display: none}
}

@media (width < 62em) {
  #hybrid {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: min-content;
    grid-column: var(--cont-lyt);
    align-items: start;
    grid-row: 2;
    background: var(--card-bg);
    width: 100%;
    height: 100dvh;
    box-shadow: 0 0 0 10vmax var(--card-bg);
    clip-path: inset(0 -10vmax);
    overflow-x: hidden;
    position: absolute;
    top: 0;
    z-index: 999;
    transform: translate(-120vmax);
    transition: transform var(--trs-2) cubic-bezier(0.25, 0, 0.25, 1);
    transition-delay: 0s;
    opacity:0;

    &.show {
      transform: translate(0) !important;
      transition-delay: 0.3s;
      opacity:1
    }
  }

  #menu-links {
    flex-direction: column;
    align-items: start;

    a {font-size: var(--t3)}
    li{width:100%}
  }

  #brx-header {
    button:not(#yamburger) {width:100%}

    &.active {
      background: var(--card-bg);
      transition-delay: 0s !important
    }
  }

  #yamburger {
    display: block;
    --btn-gpm: var(--n-l);
    --btn-br: var(--br-l)
  }

  #hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375em;
    aspect-ratio: 1;

    .line {
      width: var(--n-2xl);
      height: 0.125em;
      background: var(--ntl-100);
      display: block;
      border-radius: var(--br-m);
      transition: all 0.3s ease-in-out
    }

    &.active {
      .line:nth-child(1) {transform: translateY(0.5em) rotate(-45deg)}
      & :nth-child(2) {transform: translateY(0) rotate(45deg);opacity: 0}
      & :nth-child(3) {transform: translateY(-0.5em) rotate(45deg)}
    }
  }
}

@media (width < 40em) {iframe {min-height: 28.125em}.top-bar{p{text-wrap-style: balance;text-align: center}}}