/* One brand lockup for model pages, legacy SEO pages, Lenta, weeks and articles. */
.seo-site-header {
  --seo-site-amber: var(--amber, #faa805);
  --seo-site-amber-ink: var(--amber-ink, #faa805);
  --seo-site-muted: var(--muted, var(--a-muted, #9aa2b1));
  --seo-site-on-accent: var(--on-accent, #0a0a0a);
  --seo-site-shadow-rgb: var(--shadow-rgb, 0, 0, 0);
  --seo-site-amber-rgb: var(--amber-rgb, 250, 168, 5);
  display: flex;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  justify-content: center;
  padding: 34px 0 38px;
  position: relative;
}
.seo-site-link {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  user-select: none;
}
.seo-site-brand {
  align-items: center;
  display: inline-flex;
  gap: 16px;
  white-space: nowrap;
}
.seo-site-mark {
  background: var(--seo-site-on-accent);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(var(--seo-site-shadow-rgb), .55), 0 0 0 2px rgba(var(--seo-site-amber-rgb), .3);
  display: grid;
  height: 60px;
  overflow: hidden;
  place-items: center;
  width: 60px;
}
.seo-site-mark img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  width: 100%;
}
.seo-site-auto {
  color: var(--seo-site-amber-ink);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}
.seo-site-rama {
  background: var(--seo-site-amber);
  border-radius: 13px;
  color: var(--seo-site-on-accent);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  margin-left: -8px;
  padding: 7px 16px 9px;
}
.seo-site-action {
  color: var(--seo-site-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 25px;
  text-transform: uppercase;
}
.seo-site-link:hover .seo-site-action,
.seo-site-link:focus-visible .seo-site-action {
  color: var(--seo-site-amber-ink);
}
.seo-site-link:focus-visible {
  border-radius: 16px;
  outline: 2px solid var(--seo-site-amber);
  outline-offset: 8px;
}

@media (max-width: 760px) {
  .seo-site-header {
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
  .seo-site-mark {
    border-radius: 13px;
    height: 48px;
    width: 48px;
  }
  .seo-site-auto,
  .seo-site-rama {
    font-size: 34px;
  }
  .seo-site-rama {
    border-radius: 10px;
    padding: 6px 12px 7px;
  }
}

@media (max-width: 520px) {
  .seo-site-header { padding: 26px 0 30px; }
  .seo-site-brand { gap: 12px; }
  .seo-site-mark { height: 42px; width: 42px; }
  .seo-site-auto,
  .seo-site-rama { font-size: 29px; }
  .seo-site-rama { margin-left: -6px; padding: 5px 10px 6px; }
}
