.section { padding-top: 3rem; padding-bottom: 3rem; }

@media (max-width: 980px) {
  .container {
    width: min(100%, calc(100% - 1.5rem));
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 2.5rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .search-bar label {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}