.container {
  display: grid;
  gap: var(--Space-x3);
  align-items: center;
  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;
}

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