.siteHeader .languageSwitch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #ffffff24;
  color: #8f8d88;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.languageSwitch a,
.languageSwitch span {
  color: inherit;
  line-height: 1;
}

.languageSwitch a {
  transition: color 0.2s;
}

.languageSwitch a:hover,
.languageSwitch [aria-current="page"] {
  color: var(--amber);
}

.languageSwitch i {
  color: #555;
  font-style: normal;
}

@media (max-width: 760px) {
  .siteHeader,
  .hero .siteHeader {
    gap: 12px;
  }

  .siteHeader .languageSwitch {
    gap: 5px;
    height: 30px;
    padding-inline: 7px;
    font-size: 9px;
  }

  .mobileMenu > div {
    position: fixed;
    top: 88px;
    right: 20px;
    left: 20px;
    width: auto;
  }
}

@media (max-width: 380px) {
  .siteHeader,
  .hero .siteHeader {
    gap: 6px;
  }

  .brand b {
    font-size: 14px;
  }

  .siteHeader .languageSwitch {
    gap: 3px;
    height: 28px;
    padding-inline: 4px;
    font-size: 8px;
  }

  .mobileMenu summary {
    font-size: 9px;
  }

  .mobileMenu > div {
    top: 78px;
    right: 16px;
    left: 16px;
  }
}