/* Mobile overrides specific to index.html */

@media (max-width: 900px){
  .hero-copy{
    max-width: 640px;
  }
  #about .feature-grid{
    margin-top: 14px;
    gap: 10px;
  }
  #about .feature{
    padding: 12px;
  }
  #race .race-grid{
    gap: 10px;
  }
  #sponsors .sponsor-grid{
    gap: 10px;
  }
}

@media (max-width: 760px){
  .hero-bg{
    background-position: 18% 8%, 86% 10%, 52% 82%, center, center 42%;
  }
  .hero-copy .badge{
    margin-bottom: 10px;
  }
  #race .spec-list--race strong{
    font-size: 13px;
  }
  #race .race-roadmap{
    margin-top: 12px;
  }
  #race .race-center-head{
    align-items:stretch;
    flex-direction:column;
  }
  #race .race-center-head .btn{
    width: 100%;
  }
  #race .race-center-follow .btn{
    width: 100%;
  }
  #race .race-filters{
    top: 74px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  #race .race-filter{
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #race .post-top{
    flex-direction: column;
    align-items:flex-start;
    gap: 8px;
  }
  #race .poll-option-line{
    font-size: 12px;
  }
  #contact .form .btn{
    width: 100%;
  }
  #contact .contact-cards{
    margin-top: 12px;
  }
}

@media (max-width: 520px){
  .hero-bg{
    background-position: 14% 8%, 88% 10%, 50% 86%, center, center 44%;
  }
  .hero-copy .lead{
    max-width: 34ch;
  }
  #about .feature h3{
    font-size: 18px;
  }
  .card-summary .card-row{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .card-summary .card-row strong{
    max-width: 100%;
    text-align:left;
  }
  .footer-links{
    width: 100%;
    justify-content: space-between;
  }
}