@media (max-width: 1024px) {
  .container-image img {
    height: 12.5rem;
  }

  .intro h1 {
    font-size: 1.5rem;
  }
  .intro h2 {
    font-size: 14px;
    margin: auto;
    padding: auto;
  }

  .search-bar {
    max-width: 80%;
  }

  .recette-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 820px) {
  .container-image img {
    height: 11.25rem;
  }

  .intro h1 {
    font-size: 1.375rem;
    margin-top: 1.5rem;
  }
  .intro h2 {
    font-size: 14px;
  }

  .recette-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 650px) {
  .filters-container {
    display: flex;
    flex-direction: column;
  }
}