@media (max-width:48rem){
  /*TIPOGRAPHY*/
  h1,
  h2,
  h3,
  p{
    text-align:center;
  }
  a.button{
    display:flex;
    width:100%;
    justify-content:center;
    text-align:center;
  }
  /*HEADER*/
  .site-header{
    height:80px;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--color-red);
  }
  .site-nav.is-open{
    display:block;
  }
  .site-nav ul{
    display:grid;
    gap:.25em;
    padding-bottom:var(--gutter-mob);
  }
  .site-nav ul li{
    padding:.5em 0;
  }
  .site-nav a,
  .site-nav a:hover,
  .site-nav a.nav-pill,
  .site-nav a.nav-pill:hover{
    border:0;
  }
  .site-nav a.nav-pill,
  .site-nav a.nav-pill:hover{
    background:transparent;
  }
  /*MENU*/
  .menu-toggle{
    background:transparent;
    border:0;
    display:grid;
    gap:5px;
    padding:.5em
  }
  .menu-toggle span:not(.visually-hidden){
    background:var(--color-white);
    border-radius:999px;
    height:3px;
    width:1.75em;
  }
  /*CONTENT*/
  .container{
    padding:var(--gutter-mob);
    max-width:var(--container-mob);
  }
  section{
    padding:2em 0;
  }
  .hero{

  }
  .hero__kicker{
    font-size: 1.5em;
    line-height: 1.2em;
  }
  .hero__kicker span{
    display:block;
  }
  .hero__claim,
  .hero__meta,
  .cta__text p{
    font-size: 1.2em;
  }
  .hero h1,
  .cta__text h2{
    font-size: 2.9em;
    line-height: 1.3em;
  }
  .cta__text h2{
    font-size: 2.5em;
  }
  .hero__actions,
  .hero__countdown,
  .final-cta{
    flex-direction: column;
  }
  .hero__actions{
    margin-top: 2em;
    gap: 1em;
  }
  .hero__countdown{
    align-items: center;
    gap: 0em;
  }
  .hero__countdown strong{
    font-size: 2.5em;
  }
  .info-grid,
  .location-grid,
  .race-grid,
  .donation,
  .benefits,
  .ambassador,
  .footer-grid{
    grid-template-columns: 1fr;
    gap:1em;

  }
  .half-image:has(.benefits)::after {
    background-image:none;
  }
  .ambassador > div:nth-child(1){
    order:2;
  }
  .ambassador > div:nth-child(2){
    order:1;
  }
  .info-card h2,
  .location-card h2 {
    font-size: 1.5em;
    text-align: left;
    margin-bottom: 0.5em;
  }
  .info-card p,
  .location-card p,
  .faq details p {
    text-align: left;
  }
  .donation h2,
  .ambassador h2,
  .sponsors h2,
  .races h2,
  .timeline h2,
  .benefits h2,
  .faq h2{
    font-size: 2em;
  }
  .races .subtitle, .timeline .subtitle, .donation .subtitle{
    font-size: 1.3em;
    line-height: 1.3em;
  }
  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline-grid{
    grid-template-columns:1fr;
    gap:1.5em;
    margin-top:2em;
  }
  .timeline-grid::before{
    width:4px;
    height:auto;
    top:0;
    bottom:0;
    left:.45em;
    right:auto;
  }
  .timeline-card{
    padding-top:0;
    padding-left:2em;
  }
  .timeline-card::before{
    left:0;
    top:.35em;
  }
  .timeline time{
    font-size:2em;
  }
  .timeline h3,
  .timeline p:not(.subtitle){
    text-align:left;
  }
  .impact-list {
    text-align: center;
  }
  .impact-list li strong{
    font-size: 2.5em;
  }
  /*FOOTER*/
  .footer-grid > div:nth-child(1){
    order:3;
  }
  .footer-grid > div:nth-child(2){
    order:1;
  }
  .footer-grid > div:nth-child(3){
    order:2;
  }
  .site-footer h2{
    padding:0;
  }
  .site-footer p{
    font-size: 1em;
  }
  .site-footer img{
    max-width:50%;
    margin:0 auto;
  }
  .social-links{
    justify-content:center;
  }

/*
.site-nav{
  background:linear-gradient(180deg,var(--color-blue),var(--color-red));
  border-top:1px solid rgb(255 255 255 /.25);
  display:none;
  left:0;
  padding:var(--space-2) var(--gutter);
  position:absolute;
  top:100%;
  width:100%;
  z-index:var(--z-menu)
}
.site-nav.is-open{
  display:block
}
.site-nav ul{
  display:grid;
  gap:.25rem;
  list-style:none;
  padding:0
}
.site-nav a{
  color:var(--color-white);
  display:block;
  font-size:.82rem;
  font-weight:900;
  padding:.75rem 0;
  text-transform:uppercase
}
.site-nav a:hover{
  color:#d6efff
}
*/
}