@import url("hero-seed-mobile-full.css?v=29ca0a064482");

/* Alternate mobile footer: rules beside the logo, social links below it. */
@media (max-width: 700px) {
  html.hero-seed-footer-swap .preview-footer {
    grid-template-areas: "brand rules" "social social";
  }

  html.hero-seed-footer-swap .preview-footer-rules {
    padding-inline-start: 36px;
  }

  html.hero-seed-footer-swap .preview-footer-social {
    padding-block-start: 20px;
    margin-inline-start: 12px;
    display: grid;
    grid-template-columns: max-content;
  }

  html.hero-seed-footer-swap .preview-footer-social h2 {
    white-space: nowrap;
  }

  html.hero-seed-footer-swap .preview-footer-social > p {
    inline-size: 0;
    min-inline-size: 100%;
    white-space: nowrap;
  }

  html.hero-seed-footer-swap .preview-social-links {
    grid-template-columns: repeat(5, 44px);
    inline-size: auto;
    min-inline-size: 0;
    max-width: none;
    gap: 4px;
    /* Align the visible circles while retaining centred 44px hit areas. */
    margin-inline-start: -10px;
  }

  html.hero-seed-footer-swap .preview-social-links > button:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  html.hero-seed-footer-swap .preview-social-icon {
    width: 24px;
    height: 24px;
  }

  html.hero-seed-footer-swap .preview-social-icon svg {
    width: 18px;
    height: 18px;
  }

  html.hero-seed-footer-swap .preview-social-icon[data-network="X"] svg {
    width: 14px;
    height: 14px;
  }

  html.hero-seed-footer-swap .preview-social-icon[data-network="TikTok"] svg {
    width: 17px;
    height: 17px;
  }

  html.hero-seed-footer-swap .preview-social-links small {
    display: none;
  }
}