.container {
  display: grid;
  gap: var(--Space-x1);
  align-items: flex-start;
  grid-template-areas:
    "availableRoomsCount"
    "noAvailabilityAlert"
    "filters";
}

.availableRoomsCount {
  grid-area: availableRoomsCount;
}

.noAvailabilityAlert {
  grid-area: noAvailabilityAlert;
}

.filters {
  grid-area: filters;
  display: flex;
  gap: var(--Space-x1);
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .container {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "availableRoomsCount filters"
      "noAvailabilityAlert noAvailabilityAlert";
  }
}