@media (max-width: 480px) {

  .top-header{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }

  .top-header .right{
    flex-direction:column;
    gap:8px;
  }

  .hero img{
    aspect-ratio: 16 / 9;   /* mobile me better ratio */
  }

  .hero-text{
    padding:15px;
  }

  .hero-text h1{
    font-size:20px;
  }

  .hero-text p{
    font-size:14px;
  }

}
@media (min-width: 481px) and (max-width: 768px) {

  .top-header{
    padding:10px 15px;
  }

  .hero img{
    aspect-ratio: 16 / 7;
  }

  .hero-text h1{
    font-size:28px;
  }

  .hero-text p{
    font-size:16px;
  }

}